uniapp H5 百度地图
Posted 聚成网络
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp H5 百度地图相关的知识，希望对你有一定的参考价值。
uniapp跳转内部html 使用webview
1、首先在根目录创建hybrid 文件夹,创建html子文件夹
2、创建包含webview的vue文件，在pages.json内写入路径
文件中包uniapp如何与html 传值
核心
html中可以使用uniapp api 需使用 document.addEventListener(‘UniAppJSBridgeReady‘, function() {
uniapp.跳转方法
});
html向uniapp vue 传值
document.addEventListener(‘UniAppJSBridgeReady‘, function() {
uni.postMessage({
data: {
此处和小程序一样
}
});
uni.navigateBack({
delta:1
})
});
uniapp接受值
<web-view src="/hybrid/html/local.html" @message="handleMessage"></web-view>
<script>
export default {
methods: {
handleMessage(evt) {
console.log(evt.detail.data)
// uni.(‘接收到的消息：‘ + JSON.stringify(evt.detail.data));
}
}
}
</script>
地图展示也要使用webview 路径可以使用该路径 只需修改你的 lat lng
‘http://api.map.baidu.com/geocoder?location=‘+option.lat+‘,‘+option.lng+‘&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo‘
点击地图获取地区的名字
map.addEventListener("onclick", function(e){
geoc.getLocation(e.point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
文章转载至：https://www.juchengvi.com/looknews/104以上是关于uniapp H5 百度地图的主要内容，如果未能解决你的问题，请参考以下文章