uniapp H5使用高德地图实现uni.chooseLocation
文章描述：
uniapp H5使用高德地图实现uni.chooseLocation，可以设置默认坐标位置
高德开发平台
申请获取绑定服务 → Web服务和Web端的Key
插件
地址：https://ext.dcloud.net.cn/plugin?id=7417
步骤
1. 新建components组件文件夹，把下载的插件文件amap-choose.vue和search.png放在目录下面
2. 新建一个vue页面
template
<template>
<view class="content">
<button @click="gdLcation">高德地图获取位置</button>
<amap-choose :color="color" :keyMap="keyMap" :AMapKeyWeb="AMapKeyWeb" :show="show" :initLocation="initLocation" @placeChoose="placeChoose" @changeShow="changeShow"></amap-choose>
{{address}}
</view>
</template>
script
import amapChoose from '../../components/amap-choose.vue'
export default {
components:{
amapChoose
},
data() {
return {
color:'#000',
keyMap:'',
AMapKeyWeb:'',
show:false,
initLocation:'',
address:''
}
},
onLoad() {
},
methods: {
gdLcation(){
this.show = true
},
placeChoose(val){
console.log(val)
this.address = val.address
this.show = false
},
changeShow(val){
console.log(val)
}
}
}
发布时间：2022/07/06
发表评论