uniapp使用webview来加载地图达到地图选点功能
“
uniapp上要做选择地址的功能，顿时感觉有点不好实现，灵光一闪，可以用腾讯地图的选点组件以webview来实现呀
”
在uniapp中选择地址，本来是想用地图map组件，但看了一下没有比较好的实现方式，于是就想到了用网页来实现；下面看看我的代码吧。
首先我们需要一个html网页，对，就是.html后缀的文件
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>地点选择</title>
</head>
<body>
<iframe
id="mapPage"
width="100%"
height="750px"
frameborder=0
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp">
</iframe>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script type="text/javascript">
window.addEventListener('message', function (event) {
var loc = event.data;
if (loc && loc.module == 'locationPicker') {
console.log('location', loc);
uni.postMessage({
data: loc
})
}
}, false);
</script>
</body>
</html>
然后我们拿到这个html地址，例如：可以放到static目录，/static/html/map.html
APP上面map.vue
<template>
<div class="map-warp">
<!--#ifdef H5-->
<web-view
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp"
@message="onMessage">
</web-view>
<!--#endif-->
<!--#ifdef APP-PLUS-->
<web-view src="/static/html/map.html" @message="onMessage"></web-view>
<!--#endif-->
</div>
</template>
<script>
export default {
data() {
return {
height: uni.getSystemInfoSync().screenHeight,
}
},
onReady() {
const self = this
//#ifdef H5
if (window.isListen) {
// 防止多次注册addEventListener事件
return
}
window.addEventListener('message', function (event) {
var loc = event.data;
if (loc && loc.module == 'locationPicker') {
console.log('location', loc);
self.getPositon(loc, self)
};
window.isListen = true
window.removeEventListener('message', function() {}, true)
}, false)
//#endif
},
methods: {
onMessage(res) {
console.log('app接收网页消息:', res.detail.data[0])
this.getPositon(res.detail.data[0], this)
},
getPositon(res, self) {
uni.$emit('onAddressChange', res)
setTimeout(function() {
self.$nav.back()
}, 1000)
}
},
}
</script>
<style scoped lang="scss">
</style>
到此就可以愉快的玩耍了，APP和H5都能使用
