uniapp h5接入地图选点组件

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 = true
				window.removeEventListener('message', function() {}, true)
			}, false);
		},
		methods: {},
	}
</script>