vue 百度地圖多標注展示和點擊標注進行的提示

index.html中加入script

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=2GRZTukOKUxe25P86mqjHuR1mTahwueb" ></script>

新建map.vue

<template>
  <div id="allmap"
       class="Map" />
</template>

<script>
/* eslint-disable*/


export default {
  name: 'Mapbox',
  data() {
    return {
    }
  },
  mounted: function () {
    this.$nextTick(() => {
      var map = new BMap.Map("allmap");   //初始化map, 綁定id=allmap
      var point = new BMap.Point(121.48789949, 31.24916171);   // 初始化point, 給定一個默認x,y值
      map.centerAndZoom(point, 10);        // 將point點放入map中，展示在頁面中心展示，10=縮放程度
      map.enableScrollWheelZoom();         // 開啟滾動鼠標滑輪

      // 如有多個point去展示，可根據后端接口傳入為主
      let data = [
        { x: 116.297047, y: 39.979542, name: '張三' },
        { x: 116.321768, y: 39.88748, name: '李四' },
        { x: 116.494243, y: 39.756539, name: '王五' }
      ]

      data.forEach((e, i) => {
        // 創建point, 將x,y值傳入
        let pointNumber = new BMap.Point(e.x, e.y)

        // 創建信息窗口對象  
        let infoWindow = new BMap.InfoWindow("World", {
          width: 150,     // 信息窗口寬度    
          height: 100,     // 信息窗口高度    
          title: "Hello" + i  // 信息窗口標題   
        });
        // 將data中的name加入地圖中
        var label = new BMap.Label(e.name, {
          offset: new BMap.Size(25, 5)
        });
        markerFun(pointNumber, infoWindow, label)
      })

      function markerFun(points, infoWindows, label) {
        let markers = new BMap.Marker(points);
        map.addOverlay(markers);  // 將標注添加到地圖中
        markers.setLabel(label);  // 將data中的name添加到地圖中
        // 標注的點擊事件
        markers.addEventListener("click", function (event) {
          map.openInfoWindow(infoWindows, points);//參數：窗口、點  根據點擊的點出現對應的窗口
        });
      }

      // 獲取當前地理位置
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        } else {
          // alert('failed' + this.getStatus());
        }
      });

    })
  },
  methods: {

  }
}
</script>

<style>
.Map {
  height: calc(100vh - 126px);
  width: 100%;
}
</style>