百度地圖 - 基礎學習(1): 地圖開發環境搭建

Vue項目接入百度地圖，這次學習用的是原生API。

1、引入百度地圖JS

在 index.html 內添加script標籤，引入百度地圖api地址：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地圖祕鑰(ak)"></script>

2、API調用，地圖初始化

一、容器節點準備

完成百度地圖引入之後，就能夠進行地圖api調用了。但，在地圖初始化api調用以前，還須要先準備一個DOM標籤(通常爲div)做爲容器，用於顯示地圖。

<el-col style="width: calc(100% - 320px);padding-left: 20px">
    <div id="allmap" ref="allmap" :style="{ height: mapHandler.height + 'px' }"></div>
</el-col>

注：地圖顯示和其餘內容顯示不同，其餘節點咱們給DOM標籤或父標籤設置了寬(100%)高(100%)，標籤會根據內容的寬高自行撐開節點顯示。但地圖不會，須要咱們明確地設定寬高值(不能用比較寬泛的100%)

二、初始化地圖

容器節點準備好之後，就能夠進行地圖的初始化了。(因爲百度地圖基類BMap在項目啓動時，已被掛載到window對象上，故能夠直接調用)

const BMap = window.BMap;// 用常量存放BMap基類，便於其餘地方調用，不用每次都去window對象上獲取，也更易於理解

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

initMap() {
  this.mapInstance = new BMap.Map(this.$refs.allmap); // 初始化地圖，建立Map實例，用全局變量存放Map實例，便於子組件或其餘方法調用Map實例
  this.getCurrentPosition();

  this.mapInstance.addControl(new BMap.NavigationControl()); // 添加地圖縮放比例組件
  this.mapInstance.addControl(new BMap.ScaleControl()); // 添加比例尺組件
  this.mapInstance.addControl(new BMap.OverviewMapControl()); // 添加全局查看組件(我的感受沒啥用)
  this.mapInstance.addControl(new BMap.MapTypeControl()); // 添加地圖類型控制(地圖、衛星、三維)
},

// 獲取本地位置信息(經緯度座標、城市名稱等)，進行地圖初始化
getCurrentPosition() {
  let that = this;
  let geolocation = new BMap.Geolocation(); // 獲取本地位置經緯度座標
  geolocation.getCurrentPosition(
    function(r) {
      that.mapInstance.centerAndZoom(
        new BMap.Point(r.longitude, r.latitude),
        13
      ); // 地圖初始化,設置中心點座標(本地)和地圖縮放比例。Point也能夠設定爲一個固定值，如天安門()：
      that.mapInstance.setCurrentCity(r.address.city); // 設置地圖顯示的城市(當前位置城市) 此項必須設置
      that.mapInstance.enableScrollWheelZoom(true); // 開啓鼠標滾輪縮放
      that.loadingStatus = true;
    },
    { enableHighAccuracy: true }
  );
},

三、地圖功能開發

在地圖初始化完成之後，就能夠根據實際須要進行功能開發了。