387 lines
12 KiB
Vue
387 lines
12 KiB
Vue
|
<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="gotoChooseLocation">选择地址</button>
|
|||
|
|
<view class='title'>离线地图-无需自己开发页面</view>
|
|||
|
|
<button @click="gotoOffline">进入高德自带离线地图页面</button>
|
|||
|
|
<view class='title'>离线地图-接口-用于自己后台管理</view>
|
|||
|
|
<button @click="kexiazaiCities">获取支持离线地图的城市列表</button>
|
|||
|
|
<button @click="xiazaiCity">下载某个城市</button>
|
|||
|
|
<button @click="xiazaijinduCity">检查城市下载进度</button>
|
|||
|
|
<button @click="xinbanbenCity">检查城市是否有新版本离线包</button>
|
|||
|
|
<button @click="shanchuCity">删除某个已下载的城市</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 class="title">搜索功能</view>
|
|||
|
|
<button @click="searchRegeocode">搜索逆地理信息</button>
|
|||
|
|
<button @click="searchPoiNearby">搜索附近的poi</button>
|
|||
|
|
<button @click="searchPoiWithKeyword">根据关键字搜索poi</button>
|
|||
|
|
<view class="title">其他功能</view>
|
|||
|
|
<button @click="zuobiaozhuanhuan">坐标转换</button>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// import {
|
|||
|
|
// amapPrivacyDidShow,
|
|||
|
|
// amapUserDidAgreePrivacy,
|
|||
|
|
// setAmapKey,
|
|||
|
|
// getAmapLocation,
|
|||
|
|
// startAmapLocation,
|
|||
|
|
// stopAmapLocation,
|
|||
|
|
// startAmapNavi,
|
|||
|
|
// amapTTS,
|
|||
|
|
// manageOfflineMap,
|
|||
|
|
// checkAndRequestLocationPermission,
|
|||
|
|
// searchAmapRegeocode,
|
|||
|
|
// searchAmapPoisNearby,
|
|||
|
|
// searchAmapPoisWithKeywords,
|
|||
|
|
// addMarkerToAmapNavi, //注意：必须在导航页面弹出来之后调用才能生效。
|
|||
|
|
// removeMarkerFromAmapNavi,
|
|||
|
|
// removeAllMarkersFromAmapNavi,
|
|||
|
|
// offlineMapCities,
|
|||
|
|
// offlineMapDownloadCity,
|
|||
|
|
// offlineMapCityDownloadPercent,
|
|||
|
|
// offlineMapCityHasNewVersion,
|
|||
|
|
// offlineMapDeleteCity,
|
|||
|
|
// amapCoordFromOtherCoord
|
|||
|
|
// } from '@/uni_modules/pow-amapall'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
ttsText: '我是文字转语音,支持英语,hello'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: '高德demo'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
amapPrivacyDidShow()
|
|||
|
|
amapUserDidAgreePrivacy()
|
|||
|
|
setAmapKey('6e3f2dda4c289ea1ff974f125474fd36', '6c8e2e555ca97ab6fba1f23dd668d013') // 参数依次是ioskey、安卓key
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
zuobiaozhuanhuan() {
|
|||
|
|
//把其他坐标系的坐标,转成高德坐标
|
|||
|
|
let from = 'baidu' // baidu、gps、mapbar、aliyun、google、sosomap、mapabc 只支持小写
|
|||
|
|
let lat = 29.579084
|
|||
|
|
let lon = 114.230751
|
|||
|
|
let amapCoord = amapCoordFromOtherCoord(from, lat, lon)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `高德坐标:${JSON.stringify(amapCoord)}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
shanchuCity() {
|
|||
|
|
//把offlineMapCities获取到的城市的name传入
|
|||
|
|
// 不加回调，ios高德没给回调
|
|||
|
|
offlineMapDeleteCity('合肥市')
|
|||
|
|
},
|
|||
|
|
xinbanbenCity() {
|
|||
|
|
offlineMapCityHasNewVersion('合肥市', res => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `是否有新版本:${JSON.stringify(res)}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1000,
|
|||
|
|
mask: true,
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
xiazaiCity() {
|
|||
|
|
//把offlineMapCities获取到的城市的name传入，如果本地已经有了该城市，就不会再次下载
|
|||
|
|
offlineMapDownloadCity('合肥市')
|
|||
|
|
},
|
|||
|
|
xiazaijinduCity() {
|
|||
|
|
// 0-100，0表示未开始下载，100表示下载完成，-1表示没有这个城市
|
|||
|
|
// 这个接口ios暂时不可用
|
|||
|
|
offlineMapCityDownloadPercent('合肥市', res => {
|
|||
|
|
let percent = res['percent']
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `下载进度:${percent}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1000,
|
|||
|
|
mask: true,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
kexiazaiCities() {
|
|||
|
|
offlineMapCities(res => {
|
|||
|
|
let citiesArray = res['list']
|
|||
|
|
let toastTitle = '支持下载的城市个数:' + citiesArray.length
|
|||
|
|
uni.showToast({
|
|||
|
|
title: toastTitle,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
if (citiesArray.length == 0) return
|
|||
|
|
let firstCity = citiesArray[0]
|
|||
|
|
console.log(`某个城市：${JSON.stringify(firstCity)}`);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
searchRegeocode() {
|
|||
|
|
uni.showLoading()
|
|||
|
|
searchAmapRegeocode(
|
|||
|
|
31.96875, //纬度
|
|||
|
|
118.798039, //经度
|
|||
|
|
res => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.log('逆地理信息:', JSON.stringify(res))
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `逆地理信息:${res.address}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
searchPoiNearby() {
|
|||
|
|
uni.showLoading()
|
|||
|
|
searchAmapPoisNearby(
|
|||
|
|
31.96875, //纬度
|
|||
|
|
118.798039, //经度
|
|||
|
|
1000, //搜索半径
|
|||
|
|
res => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.log('附近的poi:', JSON.stringify(res))
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `附近的poi:${res.pois.length}个`,
|
|||
|
|
icon: 'none',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
searchPoiWithKeyword() {
|
|||
|
|
uni.showLoading()
|
|||
|
|
searchAmapPoisWithKeywords(
|
|||
|
|
'餐厅', //关键字
|
|||
|
|
'南京', //城市
|
|||
|
|
res => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.log('关键字搜索poi:', JSON.stringify(res))
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `关键字搜索poi:${res.pois.length}个`,
|
|||
|
|
icon: 'none',
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
jianchadingweiquanxian() {
|
|||
|
|
checkAndRequestLocationPermission((res) => {
|
|||
|
|
console.log(`请求权限结果:${JSON.stringify(res)}`)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `请求权限结果:${res.msg}`,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
gotoOffline() {
|
|||
|
|
manageOfflineMap()
|
|||
|
|
},
|
|||
|
|
gotoMapView() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: './mapview'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
gotoChooseLocation() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: './chooseLocation',
|
|||
|
|
events: {
|
|||
|
|
chooseLocation: (res) => {
|
|||
|
|
console.log('用户选择的地址:', JSON.stringify(res))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
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: 200 //期望的定位误差，单位：米，一般填 5 、100、200 ，误差越大，定位速度越快，在安卓端：<=10 会传 Hight_Accuracy 给高德，10到 100传 Device_Sensors，100以上传 Battery_Saving
|
|||
|
|
}, 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: false, //是否跳过路径规划页面，默认为false
|
|||
|
|
naviType: naviType, //默认为'drive'
|
|||
|
|
start: {
|
|||
|
|
lon: 118.779613,
|
|||
|
|
lat: 32.055085,
|
|||
|
|
name: '南京大学鼓楼校区',
|
|||
|
|
poiId: 'B00190B4AC'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//只有驾车导航支持途径点，骑行和步行不支持途径点
|
|||
|
|
via: [{
|
|||
|
|
poiId: "B001905HYA",
|
|||
|
|
name: "南京站",
|
|||
|
|
lon: 118.797499,
|
|||
|
|
lat: 32.087104
|
|||
|
|
}],
|
|||
|
|
|
|||
|
|
//货车导航设置车辆参数即可
|
|||
|
|
carInfo: {
|
|||
|
|
plateNumber: '京N66Y66', //车牌号
|
|||
|
|
type: '1', //0:燃油客车; 1:燃油货车; 2:纯电动客车; 3:纯电动货车; 4:插电式混动客车; 5:插电式混动货车; 11:摩托车. 默认0(小车). 注意:只有设置了货车, 其他关于货车的属性设置才会生效
|
|||
|
|
size: '4', //设置货车的大小，1-微型货车 2-轻型/小型货车 3-中型货车 4-重型货车，默认为2
|
|||
|
|
width: '2.5', //设置货车的最大宽度，单位：米，mCarType = 1时候生效，取值[0-25.5]，默认2.5米
|
|||
|
|
height: '3.5', //设置货车的高度，单位：米，mCarType = 1时候生效，取值[0-25.5],默认1.6米
|
|||
|
|
length: '7.3', //设置货车的最大长度，单位：米，mCarType = 1时候生效，取值[0-25]，默认6米
|
|||
|
|
load: '0', //设置货车的总重，即车重+核定载重，单位：吨，mCarType = 1时候生效，取值[0-6553.5]
|
|||
|
|
weight: '2.5', //设置货车的核定载重，单位：吨，mCarType = 1时候生效，取值[0-6553.5]
|
|||
|
|
axies: '2', //设置货车的轴数，mCarType = 1时候生效，取值[0-255]，默认为2
|
|||
|
|
restriction: true, //设置是否躲避车辆限行，true代表躲避车辆限行，false代表不躲避车辆限行,默认为true
|
|||
|
|
loadSwitch: true //设置货车重量是否参与算路，true-重量会参与算路；false-重量不会参与算路。默认为false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, (res) => {
|
|||
|
|
// res是回调结果，拿到之后可以自己处理
|
|||
|
|
let log = `导航回调 ${JSON.stringify(res)}`
|
|||
|
|
console.log(log)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: log,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 演示在导航底图上添加 marker 的功能（该方法可用,只是demo中暂时注释掉了)
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// let markers = [{
|
|||
|
|
// id: 'uuid111', //marker的唯一id，不能重复
|
|||
|
|
// lat: 32.07634127,
|
|||
|
|
// lng: 118.77755662,
|
|||
|
|
// title: '天安门',
|
|||
|
|
// icon: 'https://s11.ax1x.com/2023/03/17/ppGtKhD.png', //目前只支持网络图片，免费生成网络图片的地址 imgse.com
|
|||
|
|
// iconWidth: 60,
|
|||
|
|
// iconHeight: 60, //单位 px , iconWidth和iconHeight成对传，否则不生效
|
|||
|
|
// zIndex: 1
|
|||
|
|
// }]
|
|||
|
|
// addMarkerToAmapNavi(JSON.stringify(markers))
|
|||
|
|
// }, 3000)
|
|||
|
|
|
|||
|
|
// 演示在导航底图上添加 marker 的功能（该方法可用,只是demo中暂时注释掉了)
|
|||
|
|
// setTimeout(()=>{
|
|||
|
|
// let markerIds = ['uuid111']
|
|||
|
|
// removeMarkerFromAmapNavi(JSON.stringify(markerIds))
|
|||
|
|
// // removeAllMarkersFromAmapNavi()
|
|||
|
|
// }, 10000)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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>
|