技術標籤：前端vue.js

vue中引入百度地圖

前期準備：在百度地址開放平臺註冊一個自己的百度地圖的金鑰(ak)，申請地址: http://lbsyun.baidu.com/apiconsole

實現步驟：

1.專案根目錄下下載百度地圖外掛

npm install vue-baidu-map –save

2.建立一個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)
  })
}

3.在顯示地圖的元件中 template 中：

 <div class="baidumap"
 
 id="allmap"></div>    //地圖的容器

4.在顯示地圖的元件中 script 中：

<script>
import { MP } from "@/map.js";   //在此處引用map.js
export default {
  name: "pm-distribution",
  components: {
  },
  data() {
    return {
      ak: "在此處填寫自己申請的百度地圖的金鑰ak"
    };
  },
  mounted
 
() {
    this.$nextTick(function() {
      let that = this;
      MP(that.ak).then(BMap => {
        // 百度地圖API功能
        that.baiduMap();
      });
    });
  },
  methods: {
    ...mapMutations(["changeStyle"]),
    baiduMap() {
      var map = new BMap.Map("allmap"); // 建立地圖例項
      var point = new BMap.Point(經度座標, 緯度座標); // 建立點座標
      map.centerAndZoom(point, 15); // 初始化地圖，設定中心點座標和地圖級別
      map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放

      map.addControl(new BMap.NavigationControl()); //平移縮放控制元件
      map.addControl(new BMap.ScaleControl());    //比例尺
      map.addControl(new BMap.OverviewMapControl()); //縮略地圖
      map.addControl(new BMap.MapTypeControl()); //地圖型別
      //map.setMapStyle({ style: 'midnight' }) //地圖風格

      var marker = new window.BMap.Marker(point); // 建立標註
      map.addOverlay(marker); // 將標註新增到地圖中

      //提示資訊
      var infoWindow = new BMap.InfoWindow(
        "在此處填寫提示資訊"
      );
      // 滑鼠移上標註點要發生的事
      marker.addEventListener("mouseover", function() {
        this.openInfoWindow(infoWindow);
      });

      // 滑鼠移開標註點要發生的事
      marker.addEventListener("mouseout", function() {
        //this.closeInfoWindow(infoWindow)
      });
    }
  }
};
</script>

5.在顯示地圖的元件中 style 中改變一下預設樣式：

.baidumap {
    width: 1000px;
    height: 500px;
    border: 1px solid red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* 去除百度地圖版權那行字 和 百度logo */

.baidumap > .BMap_cpyCtrl {
    display: none !important;
}
.baidumap > .anchorBL {
    display: none !important;
}