更新记录
1.0.14(2024-08-01)
增加删除标记点接口removeAnnonationMarker、clear
1.0.13(2024-05-10)
- 增加设置点标记旋转方向
1.0.12(2024-05-10)
- 增加设置地图旋转角度(逆时针为正向)接口
平台兼容性
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功能实现,支持地图样式、定位样式、交通图、室内图等等,支持地图上绘制点标记、地图选点、地图截屏等等,支持地理位置、反地理位置编码,周边美食、景点等搜索,实时导航
快速接入
- 在高德地图开放平台(https://console.amap.com/dev/key/app)[https://console.amap.com/dev/key/app]创建Android、iOS应用
- 记录下开放平台上应用的appkey
- 集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027
- Android体验demo apk下载https://fir.xcxwo.com/ejc5
项目配置
android项目配置
- 下载插件网页右上角的示例项目demo
- 将demo里的AndroidManifest.xml拷贝到项目到根目录,并替换application节点下meta-data节点的appkey值
- 在首页或启动的时候请求动态权限
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项目配置
- ios权限
"NSLocationWhenInUseUsageDescription" : "访问位置需要您的授权",
"NSLocationAlwaysUsageDescription" : "访问位置需要您的授权",
"NSLocationAlwaysAndWhenInUseUsageDescription" : "访问位置需要您的授权"
-
ios需要在后台运行能力里增加location,否则导航会闪退 manifest.json->App常用其他配置-> 后台运行能力添加location
-
启动时初始化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
- 更新App是否显示隐私弹窗的状态
更新App是否显示隐私弹窗的状态,隐私弹窗是否包含高德SDK隐私协议内容的状态. 注意:必须在MAMapView实例化之前调用
let isContains = true
let isShow = true
updatePrivacyShow(isContains, isShow)
- 更新用户授权高德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">
回调接口
-
onLoadView 地图UI控件创建完成
-
onUpdateLocation 位置或者设备方向更新后
-
onSucLoadMap 地图加载成功
-
onFailLoadMap 地图加载失败
-
onClickAnnotationMarker 点击了地图上的点标记
-
onClickCallout 点击了地图上的点标记的气泡
地图接口
- 设置地图图层类型
let mapType = 2;
this.$refs.mapview.setMapType(mapType);
mapType:
- 0:普通地图
- 1:卫星地图
- 2:夜间视图
- 3:导航视图
- 4:公交视图
- 5:导航夜间视图
- 用户跟踪模式
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 定位、但不会移动到地图中心点,地图依照设备方向旋转,并且会跟随设备移动。
- 是否显示用户位置
this.$refs.mapview.showsUserLocation(true)
- 是否显示交通路况图层
this.$refs.mapview.showTraffic(true)
- 是否室内地图
this.$refs.mapview.showIndoorMap(true)
- 自定义地图样式
var enable = true
var path = plus.io.convertLocalFileSystemURL("_www/static/my_style_new.data")
this.$refs.mapview.customMapStyle(enable, path)
- 自定义系统定位蓝点
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))
- 设置地图中心点
var latitude = 12.2
var longitude = 15.0
var animate = true
this.$refs.mapview.setCenterCoordinate(latitude, longitude, animate)
- 设置缩放级别
// 默认3-19,有室内地图时为3-20
var zoomLevel = 5
var animate = true
this.$refs.mapview.setZoomLevel(zoomLevel, animate)
- 地图放大一级
var animate = true
this.$refs.mapview.zoomIn(animate)
- 地图缩小一级
var animate = true
this.$refs.mapview.zoomOut(animate)
- 设置最小缩放级别
this.$refs.mapview.setMinZoomLevel(3)
- 设置最大缩放级别
this.$refs.mapview.setMaxZoomLevel(20)
- 是否显示比例尺
this.$refs.mapview.showsScale(true)
- 是否显示指南针
this.$refs.mapview.showsCompass(true)
- 是否支持缩放
this.$refs.mapview.zoomEnabled(true)
- 是否支持滚动
this.$refs.mapview.scrollEnabled(true)
- 是否支持旋转
this.$refs.mapview.rotateEnabled(true)
- 设置logo中心点
this.$refs.mapview.setLogoCenter(20.1, 30.5)
- 设置logo底部边距
this.$refs.mapview.setLogoBottomMargin(12.0)
- 绘制点标记
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));
- 移除所有的点标记
this.$refs.mapview.removeAllAnnotationMarkers()
- 显示所有的点标记
this.$refs.mapview.showAllAnnotationMarkers()
<!-- 24. 隐藏logo
```
this.$refs.mapview.hideLogo()
``` -->
- 设置定位精确度,仅支持iOS
// BestForNavigation、Best、NearestTenMeters、HundredMeters、Kilometer、ThreeKilometers
var desiredAccuracy = "BestForNavigation"
this.$refs.mapview.setDesiredAccuracy(desiredAccuracy)
- 是否允许后台定位,仅支持iOS
this.$refs.mapview.allowsBackgroundLocationUpdates(true)
- 更新点标记坐标
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));
- 设置点标记旋转移动方向
var params = {}
params.movingDirection = 12.2 // 旋转角度, 如当前角度是0,720表示逆时针旋转2周,-720表示正时针旋转2周
params.identify = "xxx"
this.$refs.mapview.setAnnotationMarkerMovingDirection(JSON.stringify(params));
- 设置地图旋转角度(逆时针为正向)
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));
- 从地图上删除所有的覆盖物(marker,circle,polyline 等对象),但myLocationOverlay(内置定位覆盖物)除外。仅支持Android
let isKeepMyLocationOverlay = false
this.$refs.mapview.clear(isKeepMyLocationOverlay)
- 从地图上删除标记点
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()
地图计算工具
- 其他坐标系转到高德坐标系
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)
- 两点间的直线距离计算
let latitude1 = 39.989612
let longitude1 = 116.480972
let latitude2 = 39.990347
let longitude2 = 116.480441
let distance = metersBetweenMapPoints(latitude1, longitude1, latitude2, longitude2)
- 判断点是否在圆形内,仅支持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)
- 面积计算,仅支持Android
// 左上角和右下角的坐标
let latitude1 = 39.989612
let longitude1 = 116.480972
let latitude2 = 39.990347
let longitude2 = 116.480441
let area = calculateArea(latitude1, longitude1, latitude2, longitude2)
获取地图数据
- 获取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) { //成功
}
})
- 获取地址描述数据 = 地理编码(地址转坐标)
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()