锐客网

  1. 首页 > 睿知 > it技术 > >

uniapp H5 百度地图

IT知识百度地图Uniapp百度

追风赶月莫停留，平芜尽处是春山。这篇文章主要讲述uniapp H5 百度地图相关的知识，希望能为你提供帮助。
uniapp跳转内部html  使用webview   
【uniapp H5 百度地图】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="https://www.songbingjia.com/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=https://www.songbingjia.com/android/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


    推荐阅读


    上一篇：Android 端接入代码检测简介

    下一篇：Android 透明度alpha换算16进制