uniapp:引用百度地图，创建地面图片叠加层及html页面向uniapp页面传值交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp:引用百度地图，创建地面图片叠加层及html页面向uniapp页面传值交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.第一步，创建html页面，引用百度地图，创建地面图片叠加层

根据官方指示，创建html页面位置

uniapp:引用百度地图，创建地面图片叠加层及html页面向uniapp页面传值交互

在html页面里引用uni.webview.1.5.4文件

在html页面里创建地面图片叠加层：

var map = new BMapGL.Map('container');
   map.centerAndZoom(new BMapGL.Point(105.753869, 34.571069), 18);
   map.enableScrollWheelZoom(true);
   map.setTilt(1);
   map.setDisplayOptions({
       poiText: false, // 隐藏poi标注
       poiIcon: false, // 隐藏poi图标
       building: false // 隐藏楼块
   });

   var pStart = new BMapGL.Point(105.751549, 34.568280);
   var pEnd = new BMapGL.Point(105.756287, 34.57384);
   var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
   var imgOverlay = new BMapGL.GroundOverlay(bounds, {
       type: 'image',
       url: './images/ditu2.jpg', // ---------------------------你的地区图片
       opacity: 1
   });
// imgOverlay.disableMassClear(); // 保留点
// map.clearOverlays(); // 清除点

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

map.addOverlay(imgOverlay);

2.在uniapp页面里引用html页面 ‘web-view’

uniapp:引用百度地图，创建地面图片叠加层及html页面向uniapp页面传值交互

3.html页面与uniapp页面的交互传值

html页面里：

// 向uniapp传值

document.addEventListener('UniAppJSBridgeReady', function(res) {

var data = data //-------------- 你需要传值的数据
           document.querySelector('#ui-ChengL').addEventListener('click', function(evt) {
console.log('---------->',data )
                  parent.postMessage(data , "*");
             })

});

uniapp页面里：

// 接受html页面传的值

onLoad() {
           window.addEventListener('message', function(e) { // 监听 message 事件
               console.log(e);
               console.log(e.data,'------->'); // 得到传的值
               let url = undefined;
               if(e.data == '1'){
                   url = '../index/index';
               }else{
                   url = '../audioDatils/audioDatils?codes='+e.data // 跳转详情页传值
               }
               uni.redirectTo({
                   url:url
               })
           });
      },文章来源地址https://www.toymoban.com/news/detail-492929.html