类似于微信发送位置功能
获取位置经纬度 省市区
效果如下
参考文档:腾讯位置服务
支持 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('