更新记录

1.0.14(2024-08-01)

增加删除标记点接口removeAnnonationMarker、clear

1.0.13(2024-05-10)

  1. 增加设置点标记旋转方向

1.0.12(2024-05-10)

  1. 增加设置地图旋转角度(逆时针为正向)接口
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0,Android:4.4,iOS:9,HarmonyOS:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

前言

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

快速接入

  1. 在高德地图开放平台(https://console.amap.com/dev/key/app)[https://console.amap.com/dev/key/app]创建Android、iOS应用
  2. 记录下开放平台上应用的appkey
  3. 集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027

项目配置

android项目配置

  1. 下载插件网页右上角的示例项目demo
  2. 将demo里的AndroidManifest.xml拷贝到项目到根目录,并替换application节点下meta-data节点的appkey值
  3. 在首页或启动的时候请求动态权限

    if (this.isAndroid) {
         this.requestPermission([
        "android.permission.ACCESS_COARSE_LOCATION",
        "android.permission.ACCESS_FINE_LOCATION",
        "android.permission.WRITE_EXTERNAL_STORAGE",
        "android.permission.READ_EXTERNAL_STORAGE",
        "android.permission.READ_PHONE_STATE",
        "android.permission.ACCESS_BACKGROUND_LOCATION"
    ])
}

ios项目配置

  1. ios权限

"NSLocationWhenInUseUsageDescription" : "访问位置需要您的授权",
"NSLocationAlwaysUsageDescription" : "访问位置需要您的授权",
"NSLocationAlwaysAndWhenInUseUsageDescription" : "访问位置需要您的授权"
  1. ios需要在后台运行能力里增加location,否则导航会闪退 manifest.json->App常用其他配置-> 后台运行能力添加location

  2. 启动时初始化appkey


    import {
    setAMapAPIKey,
    setTerrainEnabled
} from "@/uni_modules/wrs-uts-amap"
export default {
    onLaunch: function() {
        switch (uni.getSystemInfoSync().platform) {
            case 'ios':
                setAMapAPIKey("832c07aa99ac50592455b721606475c8")
                break;
            default:
                break;
        }
    },

接口


    import {
    updatePrivacyShow,
    updatePrivacyAgree,
    setAMapAPIKey,
    setTerrainEnabled,
    toOffineMapPage,
    getScreenInfo,
    coordinateConvert,
    metersBetweenMapPoints,
    circleContainsCoordinate,
    calculateArea,
    UTSAMapNaviCompositeManager
} from "@/uni_modules/wrs-uts-amap"

在使用地图接口或控件弹框提示用户地图的合规接口,具体可参考示例demo

  1. 更新App是否显示隐私弹窗的状态

更新App是否显示隐私弹窗的状态,隐私弹窗是否包含高德SDK隐私协议内容的状态. 注意:必须在MAMapView实例化之前调用


let isContains = true
let isShow = true
updatePrivacyShow(isContains, isShow)
  1. 更新用户授权高德SDK隐私协议状态

let isAgree = true
updatePrivacyAgree(isAgree)

创建地图&与地图交互&在地图上绘制


    <wrs-uts-amap ref='mapview' :style="'width:'+width+'px;height:'+height+'px;'" @onLoadView="onLoadView"
    @onUpdateLocation="onUpdateLocation" @onSucLoadMap="onSucLoadMap" @onFailLoadMap="onFailLoadMap">

回调接口

  1. onLoadView 地图UI控件创建完成

  2. onUpdateLocation 位置或者设备方向更新后

  3. onSucLoadMap 地图加载成功

  4. onFailLoadMap 地图加载失败

  5. onClickAnnotationMarker 点击了地图上的点标记

  6. onClickCallout 点击了地图上的点标记的气泡

地图接口

  1. 设置地图图层类型

let mapType = 2;
this.$refs.mapview.setMapType(mapType);

mapType:

  • 0:普通地图
  • 1:卫星地图
  • 2:夜间视图
  • 3:导航视图
  • 4:公交视图
  • 5:导航夜间视图
  1. 用户跟踪模式

var userTrackingMode = 2;
var animated = true
this.$refs.mapview.setUserTrackingMode(userTrackingMode, animated);

ios: userTrackingMode:

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

android: userTrackingMode:

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

this.$refs.mapview.showsUserLocation(true)
  1. 是否显示交通路况图层

this.$refs.mapview.showTraffic(true)
  1. 是否室内地图

this.$refs.mapview.showIndoorMap(true)
  1. 自定义地图样式

var enable = true
var path = plus.io.convertLocalFileSystemURL("_www/static/my_style_new.data")
this.$refs.mapview.customMapStyle(enable, path)
  1. 自定义系统定位蓝点

var params = {}
params.image = "/xx/xx/aa.png" // 定位图标, 与蓝色原点互斥,本地图片绝对路径
params.strokeColor = "#00FF00" // 精度圈 边线颜色
params.fillColor = "#00FF00" // 精度圈 填充颜色
params.lineWidth = 2 // 精度圈 边线宽度

if(!this.isAndroid) { // 下面属性仅支持iOS
    params.locationDotBgColor = "#00FF00" // 定位点背景色,不设置默认白色
    params.locationDotFillColor = "#00FF00" // 定位点蓝色圆点颜色,不设置默认蓝色
    params.showsAccuracyRing = true // 精度圈是否显示,默认YES
    params.showsHeadingIndicator = true // 是否显示方向指示(MAUserTrackingModeFollowWithHeading模式开启)。默认为YES
    params.enablePulseAnnimation = true // 内部蓝色圆点是否使用律动效果, 默认YES
}

this.$refs.mapview.customMyLocationStyle(JSON.stringify(params))
  1. 设置地图中心点

var latitude = 12.2
var longitude = 15.0
var animate  = true
this.$refs.mapview.setCenterCoordinate(latitude, longitude, animate)
  1. 设置缩放级别

// 默认3-19,有室内地图时为3-20
var zoomLevel = 5
var animate  = true
this.$refs.mapview.setZoomLevel(zoomLevel, animate)
  1. 地图放大一级

var animate  = true
this.$refs.mapview.zoomIn(animate)
  1. 地图缩小一级

var animate  = true
this.$refs.mapview.zoomOut(animate)
  1. 设置最小缩放级别

this.$refs.mapview.setMinZoomLevel(3)
  1. 设置最大缩放级别

this.$refs.mapview.setMaxZoomLevel(20)
  1. 是否显示比例尺

this.$refs.mapview.showsScale(true)
  1. 是否显示指南针

this.$refs.mapview.showsCompass(true)
  1. 是否支持缩放

this.$refs.mapview.zoomEnabled(true)
  1. 是否支持滚动

this.$refs.mapview.scrollEnabled(true)
  1. 是否支持旋转

this.$refs.mapview.rotateEnabled(true)
  1. 设置logo中心点

this.$refs.mapview.setLogoCenter(20.1, 30.5)
  1. 设置logo底部边距

 this.$refs.mapview.setLogoBottomMargin(12.0)
  1. 绘制点标记

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
        },
        draggable: true, // 是否支持拖动
        canShowCallout: true, // 是否允许弹出callout,设置气泡是否可以弹出
        image: image, // 显示的image
        selected: selected, // 设置是否处于选中状态
        lockedScreenPoint: { // 固定屏幕点的坐标
            x: 11.0, // android单位是px
            y: 12.0
        },

        centerOffset: { // 仅支持iOS,annotationView的中心默认位于annotation的坐标位置,一般不设置
            x: 0, 
            y: 0
        },
        lockedToScreen: lockedToScreen, // 仅支持iOS,是否固定在屏幕一点, 注意,拖动或者手动改变经纬度,都会导致设置失效
        zIndex: i, // 仅支持iOS,z值,大值在上,默认为0
        highlighted: false, // 仅支持iOS,是否高亮
        canAdjustPositon: true,// 仅支持iOS,弹出默认弹出框时,是否允许地图调整到合适位置来显示弹出框,默认为YES
        enabled: true, // 仅支持iOS,默认为YES,当为NO时view忽略触摸事件
        alpha: 1.0, // 仅支持Android
        visible: true, // 仅支持Android
        anchor: { // 仅支持Android,设置Marker覆盖物的锚点比例。锚点是marker 图标接触地图平面的点。图标的左顶点为(0,0)点,右底点为(1,1)点
            u: 0.5,
            v: 1
        },
        movingDirection: 12.0, // ios图标旋转方向,正北为0度,顺时针方向。即正东90,正南180,正西270。since 4.5.0
        rotateAngle: 12.2 // Android图标旋转方向
    });
}
var params = {};
// params.removeAllAnnotationMarkers = true // 是否清除当前所有点标记
// params.showAllAnnotationMarkers = true // 是否显示添加的所有点标记
params.annotationMarkers = annotationMarkers;
this.$refs.mapview.addAnnotationMarkers(JSON.stringify(params));
  1. 移除所有的点标记

this.$refs.mapview.removeAllAnnotationMarkers()
  1. 显示所有的点标记

this.$refs.mapview.showAllAnnotationMarkers()
<!-- 24. 隐藏logo ``` this.$refs.mapview.hideLogo() ``` -->
  1. 设置定位精确度,仅支持iOS

// BestForNavigation、Best、NearestTenMeters、HundredMeters、Kilometer、ThreeKilometers
var desiredAccuracy = "BestForNavigation"
this.$refs.mapview.setDesiredAccuracy(desiredAccuracy)
  1. 是否允许后台定位,仅支持iOS

this.$refs.mapview.allowsBackgroundLocationUpdates(true)
  1. 更新点标记坐标

var annotationMarkers = [];
annotationMarkers.push({
    identify: this.identify, // 添加点标记点时候需要添加标识符,更新的时候根据这个标识符来查找
    coordinate: {
            latitude: latitude,
            longitude: longitude
        },
    title: "北京",
    subtitle: "北京是中国的首都",
    image: image2
})
var params = {};
params.annotationMarkers = annotationMarkers;
this.$refs.mapview.addAnnotationMarkers(JSON.stringify(params));

var params = {
    latitude: location.latitude,
    longitude: location.longitude,
    identify: this.identify
}

this.$refs.mapview.setAnnotationMarkerCoordinate(JSON.stringify(params));
  1. 设置点标记旋转移动方向

var params = {}
params.movingDirection = 12.2 // 旋转角度, 如当前角度是0,720表示逆时针旋转2周,-720表示正时针旋转2周
params.identify = "xxx"
this.$refs.mapview.setAnnotationMarkerMovingDirection(JSON.stringify(params));
  1. 设置地图旋转角度(逆时针为正向)

var params = {}
params.rotationDegree = 12.2 // 旋转角度, 如当前角度是0,720表示逆时针旋转2周,-720表示正时针旋转2周
params.animated = true // 仅支持iOS
params.duration = 1.0 // 仅支持iOS
this.$refs.mapview.setRotationDegree(JSON.stringify(params));
  1. 从地图上删除所有的覆盖物(marker,circle,polyline 等对象),但myLocationOverlay(内置定位覆盖物)除外。仅支持Android

let isKeepMyLocationOverlay = false
this.$refs.mapview.clear(isKeepMyLocationOverlay)
  1. 从地图上删除标记点

let params = {}
params.identifys = ["xxx", "xxx"]
this.$refs.mapview.removeAnnonationMarker(JSON.stringify(params))
  • 显示3D地形图(在地图创建前设置)

setTerrainEnabled(true)
  • 使用离线地图

toOffineMapPage()


# 导航

let navi = new UTSAMapNaviCompositeManager()
  • 导航
var params = {}
// 起点,起点不传默认是当前位置
params.start = {
    latitude: 40.080525,
    longitude: 116.603039,
    name: "北京首都机场",
    poiId: "" // 没有poiId可以不传
}

// 终点
params.end = {
    latitude: 39.918058,
    longitude: 116.397026,
    name: "故宫",
    poiId: "B000A8UIN8"
}

// 途径点,没有途径点可以不传
params.way = [{
    latitude: 39.941823,
    longitude: 116.426319,
    name: "北京大学",
    poiId: "B000A816R6",
}]
if(this.isAndroid) {
    // pageType: navi、route
    // navi为直接导航
    // route为路线选择
    params.pageType = "navi" // 
} else {
    params.startNaviDirectly = true // startNaviDirectly参数仅支持iOS
}

// 启动导航
navi.showRoutePlanPage(params, (resp)=>{
    this.naviCallback(resp)
})

// 退出导航
navi.exitRoutePage()

地图计算工具

  1. 其他坐标系转到高德坐标系

let latitude = 39.989612
 let longitude = 116.480972

// type:
// 0:Baidu
// 1:MapBar
// 2:MapABC
// 3:SoSoMap
// 4:AliYun
// 5:Google
// 6:GPS
let type  = 0 
let position = coordinateConvert(latitude, longitude, type)
  1. 两点间的直线距离计算

let latitude1 = 39.989612
let longitude1 = 116.480972
let latitude2 = 39.990347
let longitude2 = 116.480441
let distance = metersBetweenMapPoints(latitude1, longitude1, latitude2, longitude2)
  1. 判断点是否在圆形内,仅支持ios

let latitude = 39.989612
let longitude = 116.480972
let centerLatitude = 39.990347
let centerLongitude = 116.480441
let radius = 200 // 单位米
let isContains = circleContainsCoordinate(latitude, longitude, centerLatitude, centerLongitude, radius)
  1. 面积计算,仅支持Android

// 左上角和右下角的坐标
let latitude1 = 39.989612
let longitude1 = 116.480972
let latitude2 = 39.990347
let longitude2 = 116.480441
let area = calculateArea(latitude1, longitude1, latitude2, longitude2)

获取地图数据

  1. 获取POI数据

var params = {};
// 搜索关键字,多个关键字用“|”分割
params.keywords = this.keywords;
params.page = 1;
params.offset = 20;
if (this.locationDetail) {
    if(this.isAndroid) { // android
        params.location = {
            latitude: this.locationDetail.detail.dynamicJSONFields.location.latitude,
            longitude: this.locationDetail.detail.dynamicJSONFields.location.longitude
        };
        // 搜索半径,单位米
        params.radius = 5000 
        // POI搜索类型,下面地址下载POI分类码表,多个类型用“|”分割 可选值:文本分类、分类代码
        // https://lbs.amap.com/api/android-sdk/guide/map-data/poi
        params.ctgr = "" 

        // 返回是否按照距离排序
        params.isDistanceSort = true
        // 返回是否按照父子关系展示POI
        params.requireSubPois = true
        // 扩展字段 base表示只返回基础数据,all表示所有数据 ,默认 base
        params.extensions = "all"
        // 是否对结果进行人工干预,如火车站,原因为POI较为特殊,结果存在人工干预,干预结果优先,所以距离优先的排序未生效 仅周边搜索支
        params.isSpecial = true
    } else { // ios
        params.location = {
            latitude: this.locationDetail.detail.location.location.latitude,
            longitude: this.locationDetail.detail.location.location.longitude
        };
        // 分类,类型,多个类型用“|”分割 可选值:文本分类、分类代码
        params.types = ""
        // //排序规则, 0-距离排序;1-综合排序, 默认0
        params.sortrule = 0
        //params.showFieldsType = 0
    }
}
// 仅在通过关键字搜索时进行限制严格按照设置城市搜索
params.cityLimit = true
params.city = "" // POI搜索区域,可以是城市编码也可以是城市名称,也可以传空字符串,空字符串代表全国在全国范围内进行搜索
geoSearch.searchPOI(params, (resp)=>{
    this.showMsg(JSON.stringify(resp))
    // Android/iOS返回的数据结构差异需要各自去解析
    this.showMsg(JSON.stringify(resp))
    var opt = resp.opt
    if(opt == 'onPOISearchSuc') { // 成功

    } else { // 失败
    }
})
  • 输入内容自动提示,目前仅支持Android,iOS请联系作者

import { UTSGeoSearch, UTSInputtips} from "@/uni_modules/wrs-uts-amap"
let inputtips = new UTSInputtips()  

                var city = "鄂州市" // 城市名称(如:北京市)或城市编码
var params = {}
params.keyword = this.keywords // 查询关键字
params.city = city // 查询的城市编码 citycode、城市名称(中文或中文全拼)、行政区划代码adcode。设置“”为全国。
params.cityLimit = true // 返回是否严重按照设定城市返回结果。
// params.location = {
//  latitude: 100,
//  longitude: 100
// }
// params.type = "xxx" // 搜索类型的组合,仅支持数字,对照下载页面获取的POI分类表输入。多种类型使用“|”分隔。https://lbs.amap.com/api/webservice/download
inputtips.requestInputtips(params, (resp)=>{
    this.showMsg(JSON.stringify(resp))
    if(resp.code == 1000) { //成功

    }
})
  1. 获取地址描述数据 = 地理编码(地址转坐标)

var params= {};
params.address = this.address; // 位置
// params.city = "北京" 
geoSearch.geocodeSearch(params, (resp) => {
    this.showMsg(JSON.stringify(resp))
    var opt = resp.opt
    switch (opt){
        // 成功
        case "onGeocodeSearchSuc":

        break;
        // 失败
        case "onSearchFail":
            break;
        default:
            break;
    }
});
  • 逆地理编码(坐标转地址)

var params= {};
params.requireExtension = true
params.latitude = parseFloat(this.latitude)
params.longitude = parseFloat(this.longitude)
geoSearch.searchRegeocode(params, (resp)=>{
    this.showMsg(JSON.stringify(resp))
    var opt = resp.opt
    switch (opt){
        // 成功
        case "onReGeocodeSearchSuc":

        break;
        // 失败
        case "onSearchFail":
            break;
        default:
            break;
    }
})

定位


import {
    UTSAMapLocationManager
} from "@/uni_modules/wrs-uts-amap"
let locationManager = new UTSAMapLocationManager()
  • 单次定位

Android先设置定位回调和参数


onLoad() {
    if(this.isAndroid) {
        locationManager.setCallback((resp)=>{
            this.showMsg(JSON.stringify(resp))
        })

        var params = {}
        params.onceLocation = true
        params.needAddress = true
        locationManager.setLocationOption(params)
    }   
},

开始定位


if(this.isAndroid) {
    locationManager.startUpdatingLocation()
} else {
    let reGeocode = true
    locationManager.requestLocation(reGeocode, (resp) => {
        this.showMsg(JSON.stringify(resp))
    })
}
  • 持续定位

设置定位回调


locationManager.setCallback((resp)=>{
    this.showMsg(JSON.stringify(resp))
})

开始定位


locationManager.startUpdatingLocation()

停止定位


locationManager.stopUpdatingLocation()

隐私、权限声明

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

android: "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", "<uses-permission android:name=\"android.permission.INTERNET\"/>", "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>", "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\"/>" ios: "NSLocationWhenInUseUsageDescription" : "访问位置需要您的授权", "NSLocationAlwaysUsageDescription" : "访问位置需要您的授权", "NSLocationAlwaysAndWhenInUseUsageDescription" : "访问位置需要您的授权"

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

插件使用的高德地图 SDK会采集数据,详情可参考:https://lbs.amap.com/api/android-sdk/summary/

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

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