uniapp地图选址(支持android ios h5)

uniapp地图选址(支持android ios h5),第1张

类似于微信发送位置功能
获取位置经纬度 省市区
效果如下
参考文档:腾讯位置服务
支持 android ios H5
有两种调用方法
iframe调用
backurl调用
参数 backurl = 回调的H5页面, 参考下方回调html https://www.你发布的HTML域名地址.com/mapTransfer/index.html

        <view class="page-body">
					<view class="page-section page-section-gap">
						<web-view
							id="myMap"
							width="100%"
							height="100%"
							@message="handleMessage"
							src="https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=0&backurl=https://www.你发布的HTML域名地址.com/mapTransfer/index.html&key=EJ2BZ-ONJ3D-HK64O-HO7IP-4PF42-TRBLI&referer=myapp"
						>
						</web-view>
					</view>
        </view>

js

	export default {
		data() {
			return {
				latng:"",
				addr:"",
			}
		},
	    methods: {
	    		//监听html 发送的消息
			  handleMessage(evt) { 
				  console.log('监听')
					console.log("postMessage: ", evt)  
					// 获取的参数保存				
					let mapData = {
						latng:evt.detail.data[0].latng,
						addr:evt.detail.data[0].addr,
					}
					console.log(decodeURI(evt.detail.data[0].addr))
					//存储在缓存中
					uni.setStorageSync('mapData', mapData);
					//回跳
					uni.navigateBack({
							delta: 1
					});
				},  
		}
	}

回调html
回调的HTML代码,需要发布到服务器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图选址</title>
</head>
<body>
  <script>
     var userAgent = navigator.userAgent;
      if (/quickapp/i.test(userAgent)) {
        // quickapp
        console.log('quickapp')
        document.write('