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

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

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

在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’

 

 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
                })
            });
      },