更新记录

1.0.0（2022-01-19）

高德官方demo功能实现，支持地图样式、定位样式、交通图、室内图等等，支持地图上绘制点标记、地图选点、地图截屏等等，支持地理位置、反地理位置编码，周边美食、景点等搜索

平台兼容性

Android Android CPU类型 iOS
适用版本区间：4.4 - 11.0 armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 适用版本区间：9 - 15

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

推荐使用UTS插件版本(更新升级快)https://ext.dcloud.net.cn/plugin?id=16399

前言

高德官方demo功能实现，支持地图样式、定位样式、交通图、室内图等等，支持地图上绘制点标记、地图选点、地图截屏等等，支持地理位置、反地理位置编码，周边美食、景点等搜索

快速接入

  1. 在高德地图开放平台(https://console.amap.com/dev/key/app)[https://console.amap.com/dev/key/app]创建Android、iOS应用
  2. 在uniapp项目的manifest.json的App模块配置的Maps里勾选高德地图，填写Android、iOS的appkey
  3. 在manifest.json-》原生插件-》云端插件，选择本插件
  4. 自定义基座
  5. 运行基座选择自定义基座
  6. 配置定位权限,参考下面的隐私、权限声明
  7. App.vue启动时初始化，配置apiKey,跟上面的appkey是同一个key
var amap = uni.requireNativePlugin("wrs-amap");
    var apiKey = "";
    switch (uni.getSystemInfoSync().platform) {
        case 'android':
            apiKey = "6de35db11f99a189b38e8e58282b371a";
            break;
        case 'ios':
            apiKey = "832c07aa99ac50592455b721606475c8";
            break;
        default:
            break;
    }
    // ios没有调用初始化key的话poi功能无法搜索
    amap.init({
        apiKey:apiKey
    });
  1. 根据高德地图的政策，app第一次启动时，需要弹框提示用户隐私合规示例
try {
                // //判断是否是首次启动,隐私信息显示一次就可以了
                const value = uni.getStorageSync('agreeStatus');
                // if (!value) {
                 if (true) {
                    try {
                        uni.setStorageSync('agreeStatus', 'firstStart');
                    } catch (e) {
                        // error
                    }
                    //更新App是否显示隐私弹窗的状态，隐私弹窗是否包含高德SDK隐私协议内容的状态.
                    var privacyShow = {};
                    privacyShow.showStatus = 1;// 显示隐私弹窗状态  -1: unknow , 0 : 未显示 ， 1 ： 已显示
                    privacyShow.containStatus = 1; // 集成SDK隐私信息状态  -1: unknow , 0 : 未集成 ， 1 ： 已集成
                    amap.updatePrivacyShow(privacyShow);
                    uni.showModal({
                        title: '温馨提示(隐私合规示例)',
                        content: '\n亲，感谢您对XXX一直以来的信任！我们依据最新的监管要求更新了XXX《隐私权政策》，特向您说明如下\n1.为向您提供交易相关基本功能，我们会收集、使用必要的信息；\n2.基于您的明示授权，我们可能会获取您的位置（为您提供附近的商品、店铺及优惠资讯等）等信息，您有权拒绝或取消授权；\n3.我们会采取业界先进的安全措施保护您的信息安全；\n4.未经您同意，我们不会从第三方处获取、共享或向提供您的信息；',
                        success: function (res) {
                            var params = {};
                            //  -1: unknow , 0 : 未同意 ， 1 ： 已同意
                            if (res.confirm) {
                              params.agreeStatus = 1;
                            } else if (res.cancel) {
                               params.agreeStatus = 0;
                            }
                            //更新用户授权高德SDK隐私协议状态
                             amap.updatePrivacyAgree(params);
                        }
                    });

                }
            } catch (e) {
                // error
            }
  1. 使用地图UI控件，页面需要使用nvue
    <wrs-amapview ref='mapview' :style="'width:'+width+'px;height:'+height+'px;'">

    </wrs-amapview>

地图API

设置地图图层类型


var params = {};
params.mapType = 2;
this.$refs.mapview.updateMap(params);

mapType:

  • 0:普通地图
  • 1:卫星地图
  • 2:夜间视图
  • 3:导航视图
  • 4:公交视图

设置用户定位追踪模式


var params = {};
params.userTrackingMode = 2;
this.$refs.mapview.updateMap(params);

userTrackingMode:

ios:

  • 0:不追踪用户
  • 1:追踪用户
  • 2:追踪用户location与heading

android:

  • 0: 只定位，不进行其他操作
  • 1: 追踪用户的location更新
  • 2: 设置定位的类型为 跟随模式
  • 3: 设置定位的类型为根据地图面向方向旋转
  • 4: 定位、且将视角移动到地图中心点，定位点依照设备方向旋转， 并且会跟随设备移动。
  • 5: 定位、但不会移动到地图中心点，定位点依照设备方向旋转，并且会跟随设备移动。
  • 6: 定位、但不会移动到地图中心点，并且会跟随设备移动。
  • 7: 定位、但不会移动到地图中心点，地图依照设备方向旋转，并且会跟随设备移动。

是否显示用户位置,即开始定位/停止定位


var params = {};
params.showsUserLocation = true;
this.$refs.mapview.updateMap(params);

是否显示用户位置,即开始定位/停止定位


var params = {};
params.showsUserLocation = true;
this.$refs.mapview.updateMap(params);

是否显示交通路况图层


var params = {};
params.showTraffic = true;
this.$refs.mapview.updateMap(params);

是否显示室内地图


var params = {};
params.showsIndoorMap = true;
this.$refs.mapview.updateMap(params);

自定义地图样式


// 显示
var params = {};
params.customMapStyle = {
enable: true,
path: "/ssss/my_style_new.data"
};
this.$refs.mapview.updateMap(params);

// 不显示
var params = {};
params.customMapStyle = {
enable: false
};
this.$refs.mapview.updateMap(params);

自定义定位蓝点


var myLocationStyle = {};
myLocationStyle.image = "/sss/ss.png"; // 本地图片地址
myLocationStyle.strokeColor = "#ff0000"; // 精度圈 边线颜色
myLocationStyle.fillColor = "#ff0000"; // 精度圈 填充颜色
myLocationStyle.strokeWidth = 2; // 精度圈 边线宽度
myLocationStyle.showsAccuracyRing = true; // 精度圈是否显示，仅支持iOS
myLocationStyle.showsHeadingIndicator = true; // 是否显示方向指示(MAUserTrackingModeFollowWithHeading模式开启)，仅支持iOS
var params = {};
params.myLocationStyle = myLocationStyle;
this.$refs.mapview.updateMap(params);

设置地图的中心点


var params = {};
params.centerCoordinate = {
latitude: 39.907728,
longitude: 116.397968
};
this.$refs.mapview.updateMap(params);

设置缩放级别

ios:(默认3-19，有室内地图时为3-20)


var params = {};
params.zoomLevel = 15;
params.zoomLevelAnimate = true;
this.$refs.mapview.updateMap(params);

地图放大一级


var params = {};
params.zoomIn = true;
params.zoomInAnimate = true;
this.$refs.mapview.updateMap(params);

地图缩小一级


var params = {};
params.zoomOut = true;
params.zoomOutAnimate = true;
this.$refs.mapview.updateMap(params);

设置地图最小缩放级别


var params = {};
params.minZoomLevel = 3;
this.$refs.mapview.updateMap(params);

设置地图最大缩放级别


var params = {};
params.maxZoomLevel = 19;
this.$refs.mapview.updateMap(params);

是否显示比例尺


var params = {};
params.showsScale = true;
this.$refs.mapview.updateMap(params);

是否显示指南针


var params = {};
params.showsCompass = true;
this.$refs.mapview.updateMap(params);

增加点标记AnnotaionMarker


    var path = "_www";
                var absPath = plus.io.convertLocalFileSystemURL(path);
                // Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
                if (absPath.endWith('/')) {
                    absPath = absPath.substring(0, absPath.length - 1);
                }
                var image1 = absPath + "/static/greenPin_lift";
                var image2 = absPath + "/static/amap_through";

                // ios会自动加载.png的1/2/3倍图
                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        image1 += ".png";
                        image2 += ".png";
                        break;
                    default:
                        break;
                }
                var latitudes = [39.992520, 39.992520, 39.998293, 40.004087, 40.001442, 39.989105, 39.989098,
                    39.998439, 39.979590, 39.978234
                ];
                var longitudes = [116.336170, 116.336170, 116.352343, 116.348904, 116.353915, 116.353915, 116.360200,
                    116.360201, 116.324219, 116.352792
                ];
                var annotationMarkers = [];
                for (var i = 0; i < latitudes.length; i++) {
                    var latitude = latitudes[i];
                    var longitude = longitudes[i];
                    var image = null;
                    if (i % 2 == 0) {
                        image = image1;
                    } else {
                        image = image2;
                    }
                    var selected = false;
                    if (i == 0) {
                        selected = true;
                    }
                    var lockedToScreen = false;
                    if (i == 0) {
                        lockedToScreen = true;
                    }
                    annotationMarkers.push({
                        title: "北京" + i,
                        subtitle: "北京是中国的首都" + i,
                        coordinate: {
                            latitude: latitude,
                            longitude: longitude
                        },
                        image: {
                            type: "local",
                            path: image
                        },
                        canShowCallout: true, // 点击时，是否显示消息介绍提示窗口
                        draggable: true, // 是否可以拖拽
                        selected: selected, // 是否选中，同一时间只选中一个
                        lockedToScreen: lockedToScreen // 是否固定在屏幕上
                    });
                }
                var params = {};
                params.annotationMarkers = annotationMarkers;
                params.showAllAnnotationMarkers = true; // 是否缩放地图显示完所有的AnnotationMarker
                params.removeCurAllAnnotationMarkers = true; // 是否移除当前地图上的AnnotationMarker
                this.$refs.mapview.addAnnotationMarkers(params);

地图wrs-amapview事件

  • 加载地图事件@onLoadMap 所有的API都需要在onLoadMap事件时或之后调用

  • 点击了点AnnotationMarker事件, @onClickAnnotationMarker

  • 点击了AnnotationMarker上的消息介绍提示窗口事件, @onClickCallout

搜索周边POI


var amap = uni.requireNativePlugin("wrs-amap");

var params = {};
                // 搜索关键字，多个关键字用“|”分割
                params.query = this.query;
                // 类型，多个类型用“|”分割 可选值:文本分类、分类代码
                // params.ctgy = 
                params.pageNum = 1;
                params.pageSize = 20;
                // 查询城市，可选值：cityname（中文或中文全拼）、citycode、adcode。注：当用户指定的经纬度和city出现冲突，若范围内有用户指定city的数据，则返回相关数据，否则返回为空。
                // params.city = "北京";
                if (this.locationDetail) {
                     // 搜索中心点坐标，跟city二选一即可
                    params.searchBound = {
                        latitude: this.locationDetail.location.latitude,
                        longitude: this.locationDetail.location.longitude,
                        radiusInMeters: 500
                    };
                }
                amap.poiSearch(params, (resp) => {
                    var flag = resp.flag;
                    if (flag) {
                        var pois = resp.pois;

                        } else {
                            uni.showModal({
                                title: '搜索结果',
                                content: "关键字:" + this.query + " 没有搜索到数据",
                                success: function(res) {

                                }
                            });
                        }
                    } else {
                        var str = JSON.stringify(resp);
                        uni.showModal({
                            title: '搜索错误',
                            content: str,
                            success: function(res) {

                            }
                        });
                    }
                });

地理编码


                var params= {};
                params.city = this.city;
                params.name = this.name;

                amap.geocodeSearched(params, (resp) => {
                    var flag = resp.flag;
                    var str = JSON.stringify(resp);
                    if(flag) {
                        this.msg = str;
                    } else {
                        this.msg = "地理编码错误:" + str;
                    }
                });

逆地理编码


                var params= {};
                params.latitude = this.latitude;
                params.longitude = this.longitude;
                params.radius = this.radius;
                params.type = "autonavi";   // 仅支持Android，输入参数坐标类型，autonavi：高德坐标，gps：GPS坐标
                amap.regeocodeSearched(params, (resp) => {
                    var flag = resp.flag;
                    var str = JSON.stringify(resp);
                    if(flag) {
                        this.msg = str;
                    } else {
                        this.msg = "反地理编码错误:" + str;
                    }
                });

支持定制，联系方式 QQ:252797991

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，您的关注就是我们创作的动力！

隐私、权限声明

1. 本插件需要申请的系统权限列表：

ios: NSLocationAlwaysAndWhenInUseUsageDescription、NSLocationAlwaysUsageDescription、NSLocationWhenInUseDescription、NSLocationWhenInUseUsageDescription android: <uses-permission android:name="android.permission.INTERNET" /> <!--允许获取粗略位置，若用GPS实现定位小蓝点功能则必选--> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!--允许获取设备和运营商信息，用于问题排查和网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选--> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <!--允许获取网络状态，用于网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选--> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!--允许获取wifi网络信息，用于网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选--> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!--允许获取wifi状态改变，用于网络定位，若无gps但仍需实现定位小蓝点功能则此权限必选--> <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> <!--允许写入扩展存储，用于数据缓存，若无此权限则写到私有目录--> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <!--允许写设备缓存，用于问题排查--> <uses-permission android:name="android.permission.WRITE_SETTINGS" tools:ignore="ProtectedPermissions" /> <!--允许读设备等信息，用于问题排查--> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <!--声明后台定位权限--> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件使用的 高德地图 SDK会采集数据，详情可参考：https://lbs.amap.com/

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...