uniapp H5 百度地图

标签：ons   ash   exp   nap   tle   page   点击   tput   nav   

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 百度地图

标签：ons   ash   exp   nap   tle   page   点击   tput   nav   

原文地址：https://www.cnblogs.com/jucheng/p/13051686.html