zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    mongo
    CSS常用属性
    nginx-proxy_cache缓存
    nginx防盗链
    oracle11g-centos部署
    VLAN高级特性
    路由
    网络摄像头分辨率
    前端开发调试线上代码的两款工具
    sql中 in , not in , exists , not exists效率分析
  • 原文地址:https://www.cnblogs.com/jucheng/p/13051686.html
Copyright © 2011-2022 走看看