uniapp使用腾讯地图组件

UNIAPP CHOOSELOCATION 在H5端定位不准确解决方案

标签： uni-app

前言

项目需要通过选取地址来获取经纬度，进而计算两点的距离。直接使用uni.chooseLoaction 发现偏差实在是太大。

解决方案

使用腾讯的 地图选点组件
传送门：地图组件 | 腾讯位置服务

第一步 申请KEY设置REFERER

注意：这里的应用名称填英文，我设置的中文，后面的链接填写referer的时候总是报错，换成英文就好了

第二步 UNIAPP页面

1.在需要获取位置信息的页面加个跳转
这里我们是跳转到webview页面去获取地址

2.在onload里面加个判断，解析返回的数据信息
当我们在webview页面获取信息之后还要跳转回当前页面，带着数据信息

onLoad(options) {
	if(options.loc){
		let loc = JSON.parse(options.loc);
		//做你的数据处理
	}
},
methods: {
	openAddres:function(){
		uni.redirectTo({
			url:"../getAddress/getAddress"
		})
	}
}

3.webview页面

<template>
	<view>
		<web-view src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=your appname"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(options) {
			window.addEventListener('message', event=> {
			  // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			    var loc = event.data;
				if (loc && loc.module == 'locationPicker') {
			        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
			        console.log('location', loc);
					uni.redirectTo({
						url:"../editAddress/editAddress?loc="+JSON.stringify(loc)
					})
				}
			}, false);
		},
		onHide() {
			window.removeEventListener();
		},
		methods: {
		}
	}
	
</script>

<style>

</style>

以上，完成，经测试。定位相当准确！