該內容只針對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>