更新记录
1.1.3(2024-04-08)
安卓增加气泡展示功能
1.1.2(2024-04-07)
安卓增加地图手动释放,避免多次进入后出现黑屏
1.1.1(2024-04-07)
增加显示自身位置时,控制地图是否自动归位
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.99,Android:5.0,iOS:10 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
pow-amapall
开发文档
UTS 语法 UTS API插件 UTS 组件插件 Hello UTS
高德定位、地图、导航全功能插件,功能持续增加中
使用步骤
- 申请高德key
- 导入本插件
- 打自定义基座
- 高德key通过
setAmapKey
方法传入插件,并且调用隐私协议方法amapPrivacyDidShow
和amapUserDidAgreePrivacy
- 调用定位、导航、地图、TTS相关方法
定位、导航、TTS功能
<template>
<view class="container">
<view class="title">定位权限</view>
<button @click="jianchadingweiquanxian">申请定位权限</button>
<view class="title">定位功能</view>
<button @click="getOnceLocation">高德单次定位</button>
<button @click="startLocation">开始持续后台定位</button>
<button @click="stopLocation">结束持续后台定位</button>
<view class="title">地图功能</view>
<button @click="gotoMapView">进入地图页面</button>
<button @click="gotoOffline">管理离线地图</button>
<view class="title">导航功能</view>
<button @click="daohang">开始高德导航</button>
<view class="title">TTS功能</view>
<input class="voice-input" placeholder="播放文字" :value="ttsText" @input="inputTTSText" />
<button @click="readTTS">播放上面的文字</button>
</view>
</template>
<script>
import {
amapPrivacyDidShow,
amapUserDidAgreePrivacy,
setAmapKey,
getAmapLocation,
startAmapLocation,
stopAmapLocation,
startAmapNavi,
amapTTS,
manageOfflineMap,
checkAndRequestLocationPermission
} from '@/uni_modules/pow-amapall'
export default {
data() {
return {
ttsText: '我是文字转语音,支持英语,hello'
}
},
onReady() {
uni.setNavigationBarTitle({
title: '高德demo'
})
amapPrivacyDidShow()
amapUserDidAgreePrivacy()
setAmapKey('2d3da96f1736d9403288c6ed95a5e85f', '72566fdc715020e355f355e4d9b7ceb1') // 参数依次是ioskey、安卓key
},
methods: {
jianchadingweiquanxian() {
checkAndRequestLocationPermission((res) => {
console.log(`请求权限结果:${JSON.stringify(res)}`)
uni.showToast({
title: `请求权限结果:${res.msg}`,
icon: 'none'
})
})
},
gotoOffline(){
manageOfflineMap()
},
gotoMapView() {
uni.navigateTo({
url: './mapview'
})
},
inputTTSText(e) {
console.log('输入了文字:', e.detail.value)
this.ttsText = e.detail.value
},
readTTS() {
if (this.ttsText == '') {
uni.showToast({
title: '输入播放文字',
icon: 'error'
})
return
}
amapTTS(this.ttsText)
},
getOnceLocation() {
uni.showLoading({
title: '获取定位',
mask: true
})
getAmapLocation({
needAddress: true, //是否需要返回位置描述文字信息,此功能需要iOS和安卓的key在高德后台正确配置
accuracy: 100 //期望的定位精度,单位:米,一般填 5 、100、200 ,精度越低速度越快
}, res => {
let log = `单次定位回调 ${JSON.stringify(res)}`
console.log(log)
uni.hideLoading()
uni.showToast({
title: log,
icon: 'none'
})
})
},
startLocation() {
startAmapLocation({
need_bg: true, //默认需要后台定位,插件内会实现高德的推荐方案,出现通知栏展示持续定位中。参考: https://lbs.Amap.com/faq/api?title=android-locsdk/guide/addition-func/android8-notice。如果不需要,传入false即可
needAddress: true, //是否需要返回位置描述文字信息,此功能需要iOS和安卓的key在高德后台正确配置
bg_title: '正在后台定位', //安卓机器后台定位时通知栏展示的文字,
interval: 2000 //定位周期,单位毫秒,不传的话默认2000ms
}, (res) => {
// res是回调结果,拿到之后可以自己处理
let log = `定位回调 ${JSON.stringify(res)}`
console.log(log)
uni.showToast({
title: log,
icon: 'none'
})
})
},
stopLocation() {
stopAmapLocation()
},
daohang() {
let naviTypeOptions = [{
title:'驾车',
type:'drive'
},{
title:'骑行',
type:'ride'
},{
title:'步行',
type:'walk'
}]
uni.showActionSheet({
title: '骑行方式',
itemList: naviTypeOptions.map(item => `${item.title}`),
success: (res) => {
let naviType = naviTypeOptions[res.tapIndex].type
startAmapNavi({
// --------------------必传参数----------------------
end: {
lon: 118.798039,
lat: 31.96875,
name: '南京南站',
poiId: 'B00190YPLY' //name和poiId可以不设置
},
// --------------------可选参数----------------------
startNaviDirectly: true, //是否跳过路径规划页面,默认为false
naviType: naviType, //默认为'drive'
start: {
lon: 118.779613,
lat: 32.055085,
name: '南京大学鼓楼校区',
poiId: 'B00190B4AC'
},
via: [{
poiId: "B001905HYA",
name: "南京站",
lon: 118.797499,
lat: 32.087104
}], //只有驾车导航支持途径点,骑行和步行不支持途径点
}, (res) => {
// res是回调结果,拿到之后可以自己处理
let log = `导航回调 ${JSON.stringify(res)}`
console.log(log)
uni.showToast({
title: log,
icon: 'none'
})
})
}
})
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
background-color: white;
}
.container{
width: 100%;
background-color: white;
padding-bottom: 20rpx;
}
button {
margin: 10px 10px 0 10px;
}
.voice-input {
border-radius: 4px;
border: 1px solid #ccc;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px;
}
.title {
margin-top: 20px;
margin-left: 10px;
font-size: 20px;
font-weight: bold;
}
</style>
地图功能
<template>
<view class="container">
<view class="map-container">
<pow-amapall class="map" ref='amap' @markerClick='markerBeiDianJiLe'></pow-amapall>
</view>
<view class="options">
<button type="primary" class="controlbtn" size="mini" @click="jianchadingweiquanxian">检查定位权限</button>
<button type="primary" class="controlbtn" size="mini"
@click="showzijiweizhi">{{didShowMyLocation?'隐藏':'展示'}}自己位置</button>
<button type="primary" class="controlbtn" size="mini" @click="qiehuantuceng">切换图层</button>
<button type="primary" class="controlbtn" size="mini"
@click="showlukuangxinxi">{{didShowTraffic?'隐藏':'展示'}}路况信息</button>
<button type="primary" class="controlbtn" size="mini"
@click="showguiweianniu">{{didShowMyLocationBtn?'隐藏':'展示'}}归位按钮</button>
<button type="primary" class="controlbtn" size="mini"
@click="showbilichi">{{didShowScaleSize?'隐藏':'展示'}}比例尺可见</button>
<button type="primary" class="controlbtn" size="mini"
@click="showsuofanganniu">{{didShowZoomBtn?'隐藏':'展示'}}缩放按钮</button>
<button type="primary" class="controlbtn" size="mini"
@click="showzhinanzhenanniu">{{didShowCompassBtn?'隐藏':'展示'}}指南针按钮</button>
<button type="primary" class="controlbtn" size="mini"
@click="enablesuofangshoushi">{{enableZoomGesture?'禁止':'允许'}}缩放手势</button>
<!-- 拖拽,倾斜,旋转手势控制 -->
<button type="primary" class="controlbtn" size="mini"
@click="enabletuozhuaishoushi">{{enableScrollGesture?'禁止':'允许'}}拖拽手势</button>
<button type="primary" class="controlbtn" size="mini"
@click="enableqingxieshoushi">{{enableTiltGesture?'禁止':'允许'}}倾斜手势</button>
<button type="primary" class="controlbtn" size="mini"
@click="enablexuanzhuanshoushi">{{enableRotateGesture?'禁止':'允许'}}旋转手势</button>
<button type="primary" class="controlbtn" size="mini"
@click="zhongyingwen">切换到{{switchToLanguage}}文地图</button>
<button type="primary" class="controlbtn" size="mini" @click="getdituzhongxindian">获取地图中心点</button>
<button type="primary" class="controlbtn" size="mini" @click="movedituzhongxindian">移动地图中心点</button>
<button type="primary" class="controlbtn" size="mini" @click="suofangditu">缩放地图</button>
<button type="primary" class="controlbtn" size="mini" @click="shezhisuofangfanwei">设置缩放范围</button>
<button type="primary" class="controlbtn" size="mini" @click="tianjiamarker">添加marker</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchumarker">删除指定marker</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyoumarker">删除所有marker</button>
<button type="primary" class="controlbtn" size="mini" @click="huazhexian">画折线</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchuzhexian">删除某条折线</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouzhexian">删除所有折线</button>
<button type="primary" class="controlbtn" size="mini" @click="huayuanxing">画圆形</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchuyuanxing">删除某个圆形</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouyuanxing">删除所有圆形</button>
<button type="primary" class="controlbtn" size="mini" @click="huaduobianxing">画多边形</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchuduobianxing">删除某个多边形</button>
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouduobianxing">删除所有多边形</button>
<button type="primary" class="controlbtn" size="mini" @click="suofangbaohanmarkers">缩放以包含marker</button>
<button type="primary" class="controlbtn" size="mini" @click="pinghuayidong">点平滑移动</button>
</view>
</view>
</template>
<script>
import {
checkAndRequestLocationPermission
} from '@/uni_modules/pow-amapall'
let _markers = [{
id: 'uuid111', //marker的唯一id,不能重复
lat: 39.909187,
lng: 116.397455,
title: '天安门',
subtitle: '天安门城楼',
icon: 'https://s11.ax1x.com/2023/03/17/ppGtKhD.png', //目前只支持网络图片,免费生成网络图片的地址 imgse.com
iconWidth: 75,
iconHeight: 75, //单位 px , iconWidth和iconHeight成对传,否则不生效
anchor: 'center' // center 图片中间对准经纬度(常用于表示车辆行驶在路上),bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置),默认值center
}, {
id: 'uuid222', //marker的唯一id,不能重复
title: '王府井',
lat: 39.909187,
lng: 116.412555,
subtitle: '王府井大街',
anchor: 'bottomCenter' ,// center 图片中间对准经纬度(常用于表示车辆行驶在路上),bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置),默认值center
callout:{
content:'这是一个自定义的气泡',
textColor:'#ff8800',
fontSize:20,
textAlign:'center',
borderRadius:10,
borderColor:'#ff0000',
borderWidth:3,
bgColor:'#ffffff',
padding:20
}
}]
let polyline = {
id: 'polyline111', //折线的唯一id,不能重复
points: [
'116.362209,39.887487',
'116.422897,39.878002',
'116.372105,39.90651',
'116.428945,39.89663'
],
width: 20,
isDottedLine: true,
color: '#ff0000',
}
let circle = {
id: 'circle111', //圆形的id,不能重复
lat: 39.909187,
lng: 116.397455, //圆心经纬度
radius: 1000, //单位 m
lineWidth: 5,
strokeColor: '#FF0000',
fillColor: '#00ffff',
}
let polygon = {
id: 'polygon111', //多边形的id,不能重复
points: [
'116.404,39.915',
'116.408,39.917',
'116.412,39.919',
'116.412,39.921',
'116.410,39.923',
'116.406,39.923',
'116.404,39.921'
],
lineWidth: 5,
strokeColor: '#FF0000',
fillColor: '#00ffff',
}
export default {
data() {
return {
didShowMyLocation: false,
didShowTraffic: false,
didShowMyLocationBtn: false,
didShowZoomBtn: true,
didShowCompassBtn: false,
enableZoomGesture: true,
enableScrollGesture: true,
enableTiltGesture: true,
enableRotateGesture: true,
didShowScaleSize: true,
switchToLanguage:'英'
}
},
methods: {
zhongyingwen(){
let params = {
switchToLanguage:this.switchToLanguage //入参可选:中/英
}
this.$refs.amap.changeLanguage(JSON.stringify(params))
if(this.switchToLanguage=='英'){
this.switchToLanguage='中'
}else{
this.switchToLanguage='英'
}
},
pinghuayidong() {
this.$refs.amap.zoomTo(JSON.stringify({
zoomLevel: 13
}))
let testPoints = [
'116.37,39.91',
'116.380298, 39.907771',
'116.38, 39.90',
'116.385298, 39.907771',
'116.40, 39.90',
'116.40772, 39.909252',
'116.41, 39.89',
'116.423857, 39.889498',
'116.422312, 39.899639',
'116.425273, 39.902273'
]
//画一条线,方便观察移动轨迹
let polylinexxx = {
id: 'polylinexxx', //折线的唯一id,不能重复
points: testPoints,
width: 10,
isDottedLine: false,
color: '#ff0000',
}
this.$refs.amap.drawPolyline(JSON.stringify(polylinexxx))
// 开始添加一个平滑移动的marker
let options = {
points: testPoints,
icon: 'https://s21.ax1x.com/2024/03/13/pFcsHVP.png', //目前只支持网络图片,免费生成网络图片的地址 imgse.com
duration: 10, //单位 秒
id: 'animate111', // 用来做删除和多次平滑移动,如果要实现多次移动同一个marker,多次调用addMoveAnimation时传相同id即可
removeMarkerWhenFinish: true, //动画结束后是否需要移除
iconWidth: 75,
iconHeight: 75,
anchor: 'center' //可选项: center 图片中间对准经纬度(常用于表示车辆行驶在路上),bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置),默认值center
}
this.$refs.amap.addMoveAnimation(JSON.stringify(options))
},
qiehuantuceng() {
const options = [{
title: '导航',
type: 'navi'
},
{
title: '卫星',
type: 'satellite'
},
{
title: '普通(默认)',
type: 'normal'
},
{
title: '夜景',
type: 'night'
},
{
title: '导航夜景',
type: 'navinight'
},
{
title: '公交',
type: 'bus'
}
]
uni.showActionSheet({
title: '切换图层',
itemList: options.map(item => `${item.type}`),
success: (res) => {
let params = {
mapType: options[res.tapIndex].type
}
this.$refs.amap.setMapType(JSON.stringify(params))
}
})
},
suofangbaohanmarkers() {
console.log('缩放地图以包含给定的多个marker,并且设置边界空白')
let params = {
markers: _markers,
paddingTop: 50, // 单位,像素
paddingBottom: 50,
paddingLeft: 50,
paddingRight: 50,
animated: true
}
this.$refs.amap.setVisibleIncludeMarkers(JSON.stringify(params))
},
markerBeiDianJiLe(markInfo) {
console.log(`demo收到添加的marker被点击了:${markInfo.detail}`)
},
huayuanxing() {
this.$refs.amap.drawCircle(JSON.stringify(circle))
},
shanchuyuanxing() {
this.$refs.amap.removeCircle(JSON.stringify(circle))
},
shanchusuoyouyuanxing() {
this.$refs.amap.removeAllCircles()
},
huaduobianxing() {
this.$refs.amap.drawPolygon(JSON.stringify(polygon))
},
shanchuduobianxing() {
this.$refs.amap.removePolygon(JSON.stringify(polygon))
},
shanchusuoyouduobianxing() {
this.$refs.amap.removeAllPolygons()
},
shanchusuoyouzhexian() {
this.$refs.amap.removeAllPolylines()
},
shanchuzhexian() {
this.$refs.amap.removePolyline(JSON.stringify(polyline))
},
huazhexian() {
this.$refs.amap.drawPolyline(JSON.stringify(polyline))
},
shezhisuofangfanwei() {
let zoomLevel = {
min: 10,
max: 15
}
this.$refs.amap.setMinAndZoomLevel(JSON.stringify(zoomLevel))
uni.showToast({
title: '设置了缩放范围是10-15',
icon: 'none'
})
},
shanchusuoyoumarker() {
this.$refs.amap.removeAllMarkers()
},
shanchumarker() {
this.$refs.amap.removeSomeMarkers(JSON.stringify(_markers))
},
tianjiamarker() {
this.$refs.amap.addMarkers(JSON.stringify(_markers))
},
suofangditu() {
let zoomOptions = [0, 5, 10, 14, 17, 21]
uni.showActionSheet({
title: '设置缩放级别(0到21都行)',
itemList: zoomOptions.map(item => item + '级'),
success: (res) => {
let param = {
zoomLevel: zoomOptions[res.tapIndex]
}
let paramString = JSON.stringify(param)
this.$refs.amap.zoomTo(paramString)
}
})
},
movedituzhongxindian() {
const options = [{
title: '北京天安门',
lat: 39.909187,
lng: 116.397455,
},
{
title: '上海迪士尼',
lat: 31.231706,
lng: 121.67269,
},
{
title: '敦煌莫高窟',
lat: 40.037403,
lng: 94.805872,
},
{
title: '广州塔',
lat: 23.129163,
lng: 113.26444,
},
{
title: '布达拉宫',
lat: 29.654471,
lng: 91.118463,
}
]
uni.showActionSheet({
title: '选择一个中心点',
itemList: options.map(item => `${item.title}:${item.lat},${item.lng}`),
success: (res) => {
let param = {
lng: options[res.tapIndex].lng,
lat: options[res.tapIndex].lat
}
let paramString = JSON.stringify(param)
this.$refs.amap.moveTo(paramString)
}
})
},
// 未完成,uts有bug,无法获取返回值,也无法传入一个方法
getdituzhongxindian() {
let cameraInfoObj = this.$refs.amap.getCameraInfo()
console.log(`调用方获取到的中心点:${JSON.stringify(cameraInfoObj)}`);
uni.showToast({
title: `(uts暂不支持)中心点:${JSON.stringify(cameraInfoObj)}`,
icon: 'none'
})
},
showbilichi() {
this.$refs.amap.showScaleSize(!this.didShowScaleSize)
this.didShowScaleSize = !this.didShowScaleSize
},
enabletuozhuaishoushi() {
this.$refs.amap.enableScrollGesture(!this.enableScrollGesture)
this.enableScrollGesture = !this.enableScrollGesture
},
enableqingxieshoushi() {
this.$refs.amap.enableTiltGesture(!this.enableTiltGesture)
this.enableTiltGesture = !this.enableTiltGesture
},
enablexuanzhuanshoushi() {
this.$refs.amap.enableRotateGesture(!this.enableRotateGesture)
this.enableRotateGesture = !this.enableRotateGesture
},
enablesuofangshoushi() {
this.$refs.amap.enableZoomGesture(!this.enableZoomGesture)
this.enableZoomGesture = !this.enableZoomGesture
},
showzhinanzhenanniu() {
this.$refs.amap.showCompassBtn(!this.didShowCompassBtn)
this.didShowCompassBtn = !this.didShowCompassBtn
},
showsuofanganniu() {
this.$refs.amap.showZoomBtn(!this.didShowZoomBtn)
this.didShowZoomBtn = !this.didShowZoomBtn
},
jianchadingweiquanxian() {
checkAndRequestLocationPermission((res) => {
console.log(`请求权限结果:${JSON.stringify(res)}`)
uni.showToast({
title: `请求权限结果:${res.msg}`,
icon: 'none'
})
})
},
showzijiweizhi() {
let params = {
show:!this.didShowMyLocation, //是否展示自身位置
updatingMapCenter:false //是否根据自身位置移动地图
}
this.$refs.amap.showMyLocation(JSON.stringify(params))
this.didShowMyLocation = !this.didShowMyLocation
},
showlukuangxinxi() {
this.$refs.amap.showTraffic(!this.didShowTraffic)
this.didShowTraffic = !this.didShowTraffic
},
showguiweianniu() {
this.$refs.amap.showMyLocationBtn(!this.didShowMyLocationBtn)
this.didShowMyLocationBtn = !this.didShowMyLocationBtn
}
}
}
</script>
<style>
.map-container {
width: 750rpx;
height: 550rpx;
}
.container {
display: flex;
flex-direction: column;
width: 750rpx;
}
.map {
width: 750rpx;
height: 550rpx;
}
.controlbtn {
width: 120px;
margin-left: 5px;
margin-top: 3px;
}
.options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 750rpx;
padding-top: 10rpx;
padding-bottom: 20rpx;
}
</style>