uniapp h5接入地图选点组件

该内容只针对uniapp 打包h5接入地图选点组件做详细说明，如需详细的微信小程序接入地图选点插件，请查阅 uni-app/微信小程序接入腾讯位置服务地图选点插件

1、申请腾讯地图key

文档中提到需要一个地图key，首先登录腾讯位置服务控制台，点击左侧应用管理，创建应用，再添加key。


创建完key之后，要记得对key 做配额管理，不然在应用中，会提示获取消息列表失败

2、代码接入

2.1入口页面 （pages/map/map）

本页面为tabBar页面，若实际开发页面不同，则跳转方式自行调整

template

<template><view><button @click="open">打开地图选点</button><view v-if="info"><text>地址：{{info.poiaddress}}</text><text>坐标：{{info.latlng.lat}}, {{info.latlng.lng}}</text></view></view>
</template>

script

export default {data() {return {info: null}},methods: {show(data){console.log(data)this.info = data},open() {uni.navigateTo({url:'/pages/map/mapselect/mapselect'})}},onLoad(options) {console.log('加载监听获取经纬度的方法')uni.$on('loc',this.show)},onUnload(){console.log('卸载获取经纬度的方法')uni.$off('loc')}	}

2.2选点页面（pages/map/mapselect/mapselect）

template

<template><web-view :src="mapurl"></web-view>
</template>

script

<script>export default {data() {return {mapurl:''}},onLoad(option) {this.mapurl = 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key={申请过来的key}&referer=myapp'},onReady() {if (window.isListen) {return}window.addEventListener('message', function(event) {// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息var loc = event.data;if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'console.log('location', loc);//将获取的值通过消息传回给父页面uni.$emit('loc',loc)uni.switchTab({url:"/pages/map/map?source=true"});}window.isListen = truewindow.removeEventListener('message', function() {}, true)}, false);},methods: {},}
</script>