vue下使用百度地图遇到的坑，包括信息窗添加按钮功能，电子围栏相关实现。

本文链接：https://blog.csdn.net/weixin_41895817/article/details/114915886

提要：怎么引入就不说了，网上一查一大堆，官网也有
（地址：http://lbsyun.baidu.com/jsdemo.htm#webgl0_1）
主要说一下遇到的一些坑！！！！！！！！！！！！！！！！！底下有百度网盘链接，包含功能演示视频和具体页面代码

坑一

	需求功能描述：需要在地图上，根据经纬度数据，显示标注点在地图上，并且在标注点的上方显示信息窗口，
	显示相关信息，并且附带按钮（实时视频）
	效果图如下：

在这里插入图片描述
重点来了：这信息窗的生成，是通过js里面写html代码的方式生成的，按钮也是一个button，在这边添加点击事件，不管单独添加click，onclick，@click，再或者是通过id，通过class，以原生js的方式获取节点然后对事件监听，都不行，获取到的节点为空，最终做法：在mounted() {}里面添加一个方法，例如，我在按钮中写的方法“ οnclick='gotolink(this)”，然后在

mounted() {
 window.gotolink = function () {
      _this.gotolink();
    }，
 }

这样的方式，才可以让这个按钮有用，跳转需要参数的话，就直接在里面加就好了。
信息窗的相关代码如下（看不明白的可以留言或者私聊）

  /**
     * 信息窗口
     */
    createInfoWindow(vehicles, point) {
      this.map.removeOverlay(this.marker);
      // var opts = {
      //   width: 250, // 信息窗口宽度
      //   height: 180, // 信息窗口高度
      //   // title : "信息"  // 信息窗口标题
      // };
      var myHtml =
        "<div style='color: #01AAED;font-size: 20px;border-bottom: 1px solid #eee;padding: 0 10px 0 10px;height: 30px;line-height: 30px;'>" +
        i18n.messages[i18n.locale].moncter.devMap.message +
        "</div>" +
        "<div style='font-size: 12px;line-height:20px;padding:5px 5px 0px;'><span style='color:#999999;margin-left: 5px;font-size: 11px;'>" +
        i18n.messages[i18n.locale].moncter.devMap.deviceId +
        ":</span><span style='margin-left: 10px;'>" +
        vehicles.deviceId +
        "</span></div>" +
        "<div style='font-size: 12px;line-height:20px;padding:5px 5px 0px;'><span style='color:#999999;margin-left: 5px;font-size: 11px;'>车牌号" +
        // i18n.messages[i18n.locale].moncter.devMap.deviceName +
        ":</span><span style='margin-left: 10px;'>" +
        vehicles.vehicleNo +
        "</span></div>" +
        "<div style='font-size: 12px;line-height:20px;padding:5px 5px 0px;'><span style='color:#999999;margin-left: 5px;font-size: 11px;'>" +
        i18n.messages[i18n.locale].moncter.devMap.gpsDate +
        ":</span><span style='margin-left: 10px;'>" +
        new Date(vehicles.gpsDate).toLocaleString().replace(/:\d{1,2}$/, " ") +
        "</span></div>" +
        "<div style='font-size: 12px;line-height:20px;padding:5px 5px 0px;'><span style='color:#999999;margin-left: 5px;font-size: 11px;'>" +
        i18n.messages[i18n.locale].moncter.devMap.speed +
        ":</span><span style='margin-left: 10px;'>" +
        (vehicles.speed * 1.852).toFixed(3) +
        "km/h</span></div><br>" +
        "<Button style='display:block;margin:0 auto;border-color:#01AAED;color: #01AAED;width: 90px;background-color: white;-moz-border-radius: 10px;-webkit-border-radius: 5px;-khtml-border-radius: 10px;text-align: center;font-size: 100%;height: 25px;'  class = 'linkButton' id='myBtn' οnclick='gotolink(this)'>实时视频</Button>";

      var infoWindow = new BMap.InfoWindow(myHtml, {
        offset: new BMap.Size(-2, -12),
        width: 250, // 信息窗口宽度
        height: 200, // 信息窗口高度
      });
      // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point); // 打开信息窗口
    },

坑二

需求描述：添加一个电子围栏功能，说白了就是在地图上画一个区域范围，怎么画的，官网上有api
如下图：
在这里插入图片描述
我想说的是**，回显，**，就是这样画好后，把这个图形存到数据库，然后再回显到界面地图上！！
大概的简单demo伪代码如下：

    //回显电子围栏
    drawPolygon() {
      console.log("点击回显电子围栏");
      let point = [
         {
             lng:"116.387112",
             lat:"39.920977"
         },
         {
             lng:"116.385243",
             lat:"39.913063"
         },
         {
             lng:"116.394226",
             lat:"39.917988"
         },
         {
             lng:"116.401772",
             lat:"39.921364"
         },
         {
             lng:"116.41248",
             lat:"39.927893"
         }
      ];
      var styleOptions = {
        strokeColor: "red", //边线颜色。
        fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, //边线的宽度，以像素为单位。
        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
        strokeStyle: "solid", //边线的样式，solid或dashed。
      };
      let polArry = [];
      point.forEach((item) => {
        let p = new BMap.Point(item.lng, item.lat);
        polArry.push(p);
      });
      let polygon = new BMap.Polygon(polArry, styleOptions);
      this.polygon = polygon;
      this.overlays.push(polygon);
      this.map.addOverlay(polygon);
      //  polygon.enableEditing()可编辑围栏
	  //this.polygon.disableEditing();不可编辑

      console.log("回显完成");
    },

坑三

纠偏！！！！简单理解就是，页面地图上的经纬度，如果在实际的场景中，偏差会有几百上千都有可能，所以就需要把百度地图的经纬度换算成实际经纬度

做法一：前端纠偏
前端能做的纠偏只是把百度地图的经纬度转化为实际的经纬度，但是，不能再把实际的经纬度重新换算成百度地图的经纬度，本人所做的功能需要转换后再次回显，所以这个不适用。官网有转换
在这里插入图片描述

做法二：后端纠偏
也是借助一个Util，以下为纠偏部分的代码

 double[] p =  CoordinatesTransformControllerUtil.calWGS84toBD09(Double.parseDouble(dto.getLatitude().toString()),Double.parseDouble(dto.getLongitude().toString()));
 		//纬度
        dto.setLatitude(new BigDecimal(p[0]+""));
        //经度
        dto.setLongitude(new BigDecimal(p[1]+""));