vue中使用百度地圖的簡單方法

vue中使用百度地圖的簡單方法

1,在vue中使用地圖web端推薦用百度地圖引入方式

npm i vue-baidu-map --save

2，祕鑰值申請
祕鑰申請鏈接
3，在main.js中引入掛載

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
      /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
      ak: '你自己的祕鑰值'
})

4，使用代碼，直接看

<template>
  <div class="bj">
 <div id="right" style=“height：800px;width:800px”></div>
  </div>
</template>
<script>
import { MP } from "../../assets/map";
export default {
  data() {
    return {

      
  },
  created() {},
  mounted() {

 
    this.$nextTick(() => {
      const _this = this;
      MP(_this.ak).then(BMap => {
        _this.baidu();
      });
    });

  },

  methods: {

    //百度地圖使用
    baidu() {
      var _this = this;
      var marker = "";
      var point = "";
      var map = new BMap.Map("right");
      map.enableScrollWheelZoom();
      function getBoundary() {
        var bdary = new BMap.Boundary();
        bdary.get("北辰區", function(rs) {
          //獲取行政區域
          // map.clearOverlays(); //清除地圖覆蓋物
          var count = rs.boundaries.length; //行政區域的點有多少個
          if (count === 0) {
            alert("未能獲取當前輸入行政區域");
            return;
          }
          var pointArray = [];
          for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 2,
              strokeColor: "#0FD7FF",
              fillColor: "#06103E",
              fillOpacity: 0.7
            }); //建立多邊形覆蓋物
            map.addOverlay(ply); //添加覆蓋物
            pointArray = pointArray.concat(ply.getPath());
          }
          map.setViewport(pointArray); //調整視野
          addMask(map, pointArray);
          // 添加遮罩
          function addMask(map, points) {
            var maskPoints = points;
            var EN_JW = new BMap.Point(170.672126, 81.291804); // 東北角
            var NW_JW = new BMap.Point(-169.604276, 81.291804); // 西北角
            var WS_JW = new BMap.Point(-169.604276, -68.045308); // 西南角
            var SE_JW = new BMap.Point(170.672126, -68.045308); // 東南角
            // 添加環形遮罩層
            if (points.length > 0) {
              maskPoints.push(maskPoints[0]);
            }
            maskPoints.push(EN_JW);
            maskPoints.push(SE_JW);
            maskPoints.push(WS_JW);
            maskPoints.push(NW_JW);
            maskPoints.push(EN_JW);
            var mask = new BMap.Polygon(maskPoints, {
              strokeColor: "none",
              fillColor: "#06103E",
              strokeOpacity: 1,
              fillOpacity: 0.6
            });
            mask.disableMassClear();
            map.addOverlay(mask);
          }
    
        });
      }
      setTimeout(function() {
        getBoundary();
      }, 1000);
    }
  }
};
</script>>

<style  scoped>

</style>

5,map.js代碼

export function MP(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        resolve(BMap)
      }
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

記住一定要給父元素盒子加上高度，寬度，否則不顯示