VUE-百度地图添加覆盖物及信息窗口添加导航功能

一、添加覆盖物

根据官方的文档直接开写：

//api返回最近5公里内的所有单位信息。      
that.api.GetNearLocation(point.lat, point.lng).then(es => {
                    var list = es.data.list;
                    list.forEach(element => {
                      var newpoint = new BMap.Point(element.Lng, element.Lat);
                      var mk = new BMap.Marker(newpoint);
                      var content = element.Content;
                      var id = element.ID;
                      content =
                        "<h2>" +
                        content +
                        "</h2><br/><a id='ele_" +
                        id +
                        "' class='btn'>导航至此处</a>";
                      var title = element.Content;
                      map.addOverlay(mk);
                      that.addClickHandler(content, title, mk, BMap, map, id,element.Lat, element.Lng);
                    });
                    // console.log(list);
                  });

//注册覆盖物的点击事件  
addClickHandler(content, title, marker, BMap, map, id,lat,lng) {
      var _this = this;
      marker.addEventListener("click", function(e) {
        // alert("z注册"+id);
        _this.openInfo(content, title, e, BMap, map, id,lat,lng);
      });
    },

此处需要说明，在信息窗口正在打开的时候如果就去注册按钮的事件，是注册不上的，因为此时dom还没渲染成功。于是我在此处加了个0.2S的延迟，解决注册问题。

//打开信息窗口，并创建导航按钮的点击事件
openInfo(content, title, e, BMap, map, id,lat,lng) {
      // debugger
      var _this = this;
      var p = e.target;
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      map.panTo(point);
      var infoWindow = new BMap.InfoWindow(content, this.opts); // 创建信息窗口对象
      map.openInfoWindow(infoWindow, point); //开启信息窗口
      setTimeout(() => {
        document.getElementById("ele_" + id).onclick = function() {
          _this.openidLocation(lat, lng,title);
        };
      }, 200);
    }

 在此处翻车了，调好了半天一直报没有权限。。两个小时之后，突然想起来可能没有在微信wx.config的jsApiList添加内置导航……狂晕。。。

最后添加上后，成功打开内置地图。

//打开微信内置地图，可调用手机导航APP， 
openidLocation(lat, lng,title) {
      // alert(lat);
      // alert(lng);
     var req= this.bMapToQQMap(lng,lat);
      wx.openLocation({
        latitude: req[1], // 纬度，浮点数，范围为90 ~ -90
        longitude: req[0], // 经度，浮点数，范围为180 ~ -180。
        name: title, // 位置名
        address: "世窗信息：点击右侧按钮进入导航至"+title, // 地址详情说明
        scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },