首先，uni.chooseLocation，这是个什么玩意，不是原生的方法，原生地图覆盖了这个地图，正式打包之后也不能用，于是乎，我想到了webview嵌入h5
因为高德地图和腾讯地图引入iframe打包后不能获取具体位置，设置backurl参数（腾讯地图）也不太好用，打包之后返回不了，但是重点来了，聪明的我发现他们都有一个共同特点，都可以指定附近位置选择，腾讯的是coord参数，高德的是center，我的思路既然不能精确定位，那就先提前获取位置，然后把经纬度传到iframe的src里，这样就弥补了这个缺点，废话不多说上干货。。。
h5目录
image
页面A是要获取位置的页面，然后我们就在这个页面先获取经纬度，然后传到h5页面
image
A页面data
image
methods里先获取经纬度然后在onLoad执行下，然后把获取的经纬度传到B页面（注意：高德地图获取经纬度首先要在去高德地图申请安卓的appkey，然后在mainfest.json勾选相应配置，具体这里不多说了）
//高德地图获取经纬度
getLocation() {
let _this = this;
uni.getLocation({
type: 'gcj02',
geocode: true,
success: function(res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
let aa = res.longitude + "," + res.latitude;
_this.url += encodeURIComponent(aa)
},
fail: function(res) {
uni.showToast({
title: '获取地址失败，请检查设备是否允许定位 ',
icon: 'none'
});
_this.loadModal = false;
},
});
},
B页面来了，
<template>
<view>
<!-- #ifdef H5 -->
<view class="">
待开发，暂无地图选择！！！
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<web-view :src="url" @message="onMessage"></web-view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
url: '',
}
},
onLoad(options) {
this.url = options.url;
},
methods: {
onMessage(res) {
console.log('app接收网页消息:', res.detail.data[0])
// alert("")
this.getPositon(res.detail.data[0], this)
},
getPositon(res, self) {
uni.$emit('onAddressChange', res);
uni.navigateBack({
delta: 1
});
},
}
}
</script>
<style>
</style>
C页面(h5页面)来了，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<title>选取位置</title>
<style>
body{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
iframe{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<iframe id="test" src=""></iframe>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script>
//获取 uni-app 传来的值
let aa = getQuery('data')
let yy = "https://m.amap.com/picker/?center=" + aa + "&key=f191a00ffa4c8f78467e8769490dc5a1"
$("#test").attr("src", yy);
//取url中的经纬度
function getQuery(name) {
// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if (r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
(function() {
var iframe = document.getElementById('test').contentWindow;
document.getElementById('test').onload = function() {
iframe.postMessage('hello', 'https://m.amap.com/picker/');
};
window.addEventListener("message", function(e) {
// alert('您选择了:' + e.data.name + ',' + e.data.location)
var loc = e.data;
// 选址后自动传参到B页面
uni.postMessage({
data: loc
})
}, false);
}())
</script>
</body>
</html>
A页面接收B页面返回的经纬度城市信息，
onLoad(options) {
// 进入A页面主动获取经纬度，然后传到h5 ifrem里
this.getLocation();
// 页面通讯
let _this = this;
uni.$on("onAddressChange", function(info) {
console.log("购物车 <- 收到：", info)
// alert("购物车 <- 收到" + info)
_this.selectArea = info.name;
_this.longitude = info.location.substring(0, 10);
_this.latitude = info.location.substring(11, 20);
console.log("_this.longitude：", info.longitude)
console.log("_this.latitude：", _this.latitude)
_this.getAreaInfo();
});
},
over！over！over！
你觉得有用就点个赞再走吧！！！
网友评论