百度地圖_更改標注顏色

 一、前期准備

1、  申請密匙

  去百度地圖控制台申請密匙。

  地址：http://lbsyun.baidu.com/

 

2、  在index.html引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密鑰也就是ak值"></script>

 注：去掉地圖左下角的logo

     .BMap_cpyCtrl {

        display: none;

       }

       .anchorBL {

        display: none;

       }

3、webpack.base.conf.js里面配置

在module.exports中與entry同級添加

  externals: {
    "BMap": "BMap"
  },

4、  需要使用百度地圖的組件中導入（地圖中用到BMap 的需要導入）

import BMap from 'BMap'

5、   創建一個地圖容器，需要有寬高

   <div id="mapBox"></div>

6、   然后在vue生命周期的mounted中調用

  mounted() {
    this.initMap();
},

InitMap方法如下

    // 初始化地圖

    initMap() {

      this.map = new BMap.Map("mapBox"); // 創建Map實例

      this.map.centerAndZoom(new BMap.Point(108.95, 37.38), 5); // 初始化地圖,設置中心點坐標和地圖級別

      this.map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的

      this.map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放

    },

這樣最初的地圖就出來了

二：添加地圖覆蓋物（label,marker, initInfoWindow）

  首先看后台給的數據

[{"lng":119.417854,"lat":39.921988,"total":10,"type":"red","content":"XX"},{"lng":116.417854,"lat":39.921988,"total":10,"type":"red","content":" XXXX"}]"

1、  初始化marker

   // 初始化標注

 // 初始化標注
    initMarker(data) {
     let myIcon = null;
      let pt = new BMap.Point(data.lng, data.lat);
      if (data.type == "red") {
        myIcon = new BMap.Icon(
          require("../assets/img/red_marker.png"),
          new BMap.Size(47, 52)
       );
      } else {
        myIcon = new BMap.Icon(
          require("../assets/img/bule_marker.png"),
          new BMap.Size(47, 52)
        );
      }
      return new BMap.Marker(pt, { icon: myIcon });
      //  return new BMap.Marker(pt);
    },

2、  初始化label

   // 初始化文字標簽
    initLabel(data) {
      let opts = {
        position: new BMap.Point(data.lng, data.lat), // 指定文本標注所在的地理位置
        offset: new BMap.Size(-8, -25) //設置文本偏移量
      };
      if (data.total < 10) {
        opts.offset = new BMap.Size(-4, -18);
      } else if (data.total >= 10 && data.total < 100) {
        opts.offset = new BMap.Size(-8, -18);
      } else if (data.total >= 100 && data.total < 1000) {
        opts.offset = new BMap.Size(-12, -18);
      }
     let label = new BMap.Label(data.total, opts); // 創建文本標注對象
      label.setStyle({
        color: "#fff",
        border: "none",
       fontSize: "12px",
        height: "20px",
        lineHeight: "20px",
        fontFamily: "微軟雅黑",
        background: "rgba(0,0,0,0)"
      });
      return label;
  },

3、  初始化initInfoWindow

initInfoWindow(data) {
      let str =data. content; //自定義窗口內容
      return new BMap.InfoWindow(str, {
        offset: {
          //偏移量
          width: 5,
          height: -20
        },
       width: 300,
        enableCloseOnClick: true
      });
   },

注：如下圖在marker上加數字有多種方法

 

(1)、通過自定義覆蓋物做成數字然后添加上去。研究了下，比較麻煩具體看

https://blog.csdn.net/phper111/article/details/77897940

(2)、通過label設置偏移與樣式

接下來是根據后台給的數據來整理自己需要的數據

4、  添加標注事件

 setInfoWindow() {
      // 清除地圖上標注,文字標簽
      this.overlays.forEach(value => {
        this.map.removeOverlay(value);
      });
      // 往地圖添加標注點，與信息窗口
      this.markerArr.forEach(opt => {
        let infoWindow = this.initInfoWindow(opt.data); // 創建信息窗口對象
        let marker = this.initMarker(opt.data); //創建標注點
        let label = this.initLabel(opt.data); //創建文字標簽
        this.map.addOverlay(marker);
        this.map.addOverlay(label);
        this.overlays.push(marker, label);
        // 監聽打開信息窗口
        let this_ = this;
        marker.addEventListener("click", function() {
          this_.map.openInfoWindow(infoWindow, opt.point); //開啟信息窗口
          this_.map.removeOverlay(marker);
          opt.data.type = "blue";
          this_.setInfoWindow();
          $(".BMap_pop>img").hide();
        });
        // 監聽關閉信息窗口
        infoWindow.addEventListener("close", function() {
          opt.data.type = "red";
          this_.setInfoWindow();
        });
      });
    }

最后就是這樣的效果啦，當點擊marker變藍色