更新记录

1.0.14（2024-08-01）

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

1.0.13（2024-05-10）

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

1.0.12（2024-05-10）

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

平台兼容性

前言

高德官方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体验demo apk下载https://fir.xcxwo.com/ejc5

项目配置

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" : "访问位置需要您的授权"

2. ios需要在后台运行能力里增加location，否则导航会闪退 manifest.json->App常用其他配置-> 后台运行能力添加location

3. 启动时初始化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)

2. 更新用户授权高德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:导航夜间视图

2. 用户跟踪模式

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 定位、但不会移动到地图中心点，地图依照设备方向旋转，并且会跟随设备移动。

3. 是否显示用户位置

this.$refs.mapview.showsUserLocation(true)

4. 是否显示交通路况图层

this.$refs.mapview.showTraffic(true)

5. 是否室内地图

this.$refs.mapview.showIndoorMap(true)

6. 自定义地图样式

var enable = true
var path = plus.io.convertLocalFileSystemURL("_www/static/my_style_new.data")
this.$refs.mapview.customMapStyle(enable, path)

7. 自定义系统定位蓝点

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))

8. 设置地图中心点

var latitude = 12.2
var longitude = 15.0
var animate  = true
this.$refs.mapview.setCenterCoordinate(latitude, longitude, animate)

9. 设置缩放级别

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

10. 地图放大一级

var animate  = true
this.$refs.mapview.zoomIn(animate)

11. 地图缩小一级

var animate  = true
this.$refs.mapview.zoomOut(animate)

12. 设置最小缩放级别

this.$refs.mapview.setMinZoomLevel(3)

13. 设置最大缩放级别

this.$refs.mapview.setMaxZoomLevel(20)

14. 是否显示比例尺

this.$refs.mapview.showsScale(true)

15. 是否显示指南针

this.$refs.mapview.showsCompass(true)

16. 是否支持缩放

this.$refs.mapview.zoomEnabled(true)

17. 是否支持滚动

this.$refs.mapview.scrollEnabled(true)

18. 是否支持旋转

this.$refs.mapview.rotateEnabled(true)

19. 设置logo中心点

this.$refs.mapview.setLogoCenter(20.1， 30.5)

20. 设置logo底部边距

 this.$refs.mapview.setLogoBottomMargin(12.0)

21. 绘制点标记

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));

22. 移除所有的点标记

this.$refs.mapview.removeAllAnnotationMarkers()

23. 显示所有的点标记

this.$refs.mapview.showAllAnnotationMarkers()

25. 设置定位精确度，仅支持iOS

// BestForNavigation、Best、NearestTenMeters、HundredMeters、Kilometer、ThreeKilometers
var desiredAccuracy = "BestForNavigation"
this.$refs.mapview.setDesiredAccuracy(desiredAccuracy)

26. 是否允许后台定位，仅支持iOS

this.$refs.mapview.allowsBackgroundLocationUpdates(true)

27. 更新点标记坐标

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));

29. 设置点标记旋转移动方向

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

31. 设置地图旋转角度(逆时针为正向)

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));

32. 从地图上删除所有的覆盖物（marker，circle，polyline 等对象），但myLocationOverlay（内置定位覆盖物）除外。仅支持Android

let isKeepMyLocationOverlay = false
this.$refs.mapview.clear(isKeepMyLocationOverlay)

33. 从地图上删除标记点

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)

2. 两点间的直线距离计算

let latitude1 = 39.989612
let longitude1 = 116.480972
let latitude2 = 39.990347
let longitude2 = 116.480441
let distance = metersBetweenMapPoints(latitude1, longitude1, latitude2, longitude2)

3. 判断点是否在圆形内,仅支持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)

4. 面积计算，仅支持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) { //成功

    }
})

2. 获取地址描述数据 = 地理编码（地址转坐标）

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()