vue2.x使用百度地圖

在12月份之前在vue項目中使用百度地圖我都是在index.html直接應用如下代碼

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘鑰"></script>

然后直接在頁面直接初始化地圖即可，注意地圖一定要設置寬和高。

現在我被同事硬性擰過來使用vue baidu map。中文文檔地址https://dafrok.github.io/vue-baidu-map/#/zh/index。

此插件將需要使用的控件、覆蓋物都封裝成組件。要使用的話需要先引入並申明。如下

import { BaiduMap, BmLabel, BmGeolocation, BmOverlay, BmInfoWindow } from 'vue-baidu-map'

 給一個使用較完整的例子

    <baidu-map @moveend="moveendMap"  @ready="readyMap" class="bm-view" v-bind:style="{ width:'100%', height: winHeight + 'px' }" :center="center" ak="tRcad54fc5HjGw1mZ64lttoT" :zoom="zoom">
      <bm-info-window  :position="windowLabelPoint"  :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen" >
        <a class="header-label" :href="shopBaseinfo.url">
          <div class="shopname" v-text="shopBaseinfo.serviceProviderName"></div>
          <span>詳情»</span>
        </a>
        <div class="base-info" >
          <span v-text="'案例個數: '+shopBaseinfo.caseNum+'個'"></span>
          <span v-text="'案例個數: '+shopBaseinfo.shopDesignerNum+'個'"></span>
        </div>
      </bm-info-window>
      <bm-label
        v-for="(item,index) in decShopPointerList"
        @click="getShopInfo(item.id,index,item.longitude,item.latitude)"
        :key="item.id"
        :content="item.serviceProviderName"
        :position="{lng: item.longitude, lat: item.latitude}"
        :labelStyle="curIndex==index?labelCurStyles:labelStyles"
        :title="item.serviceProviderName"/>
    </baidu-map>

import { BaiduMap, BmLabel, BmGeolocation, BmOverlay, BmInfoWindow } from 'vue-baidu-map'
export default {
  data: () => ({
    center: {lng: 114.3162001, lat: 30.58108413},
    zoom: 14,
    winHeight: 400,
    param: {
      lonMin: 0,
      lonMax: 0,
      latMin: 0,
      latMax: 0
    },
    infoWindow: {
      show: true,
      contents: ''
    },
    decShopPointerList: [],
    windowLabelPoint: {
      lng: 0,
      lat: 0
    },
    eventListen: false, // 地圖初始完成之后才可監聽移動、放大等事件
    map: {},
    shopBaseinfo: {},
    curIndex: -1,
    labelShow: true,
    labelStyles: {color: '#fff',
      fontSize: '12px',
      background: '#f56666',
      padding: '6px',
      border: 'none',
      borderRadius: '4px'
    },
    labelCurStyles: {color: '#fff',
      fontSize: '12px',
      background: '#1894ea',
      padding: '6px',
      border: 'none',
      borderRadius: '4px'
    }

  }),
  mounted () {
    if (window.innerHeight) {
      this.winHeight = window.innerHeight
    } else if ((document.body) && (document.body.clientHeight)) {
      this.winHeight = document.body.clientHeight
    }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.center = {lng: position.coords.longitude, lat: position.coords.latitude}
      })
    }
    this.zoom = 14
  },
  methods: {
    moveendMap() {
      if (this.eventListen) {
        this.getConernPoint()
      }
    },
    infoWindowClose (e) {
      this.curIndex = -1
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    readyMap({BMap, map}) {
      this.BMap = BMap
      this.map = map
      this.Geo = new BMap.Geocoder()
      this.getConernPoint()
      this.eventListen = true
    },
    // 獲取邊角經緯度並請求商鋪數據
    getConernPoint() {
      let minPoint = this.map.getBounds().getSouthWest()
      let maxPoint = this.map.getBounds().getNorthEast()
      this.param.lonMin = minPoint.lng
      this.param.latMin = minPoint.lat
      this.param.lonMax = maxPoint.lng
      this.param.latMax = maxPoint.lat
      this.getShopsList()
    },
    getShopsList() {
      // Indicator.open('正在加載')
      getshoplist(this.param)
        .then((res) => {
          // console.log(res)
          if (res.decShopPointerList) {
            this.decShopPointerList = res.decShopPointerList
          }
          // Indicator.close()
        })
    },
    getShopInfo(id, index, lng, lat) {
      this.curIndex = index
      getshopDetail({shopId: id})
        .then((res) => {
          this.shopBaseinfo = res.decShopInfo
          this.shopBaseinfo.url = res.decShopDetailsURL
          this.shopBaseinfo.shopDesignerNum = res.decShopDesignerNum
          if (this.shopBaseinfo.caseNum > 0) {
            this.shopBaseinfo.caseNum = this.shopBaseinfo.caseNum
          } else {
            this.shopBaseinfo.caseNum = 0
          }
          if (this.shopBaseinfo.shopDesignerNum > 0) {
            this.shopBaseinfo.shopDesignerNum = this.shopBaseinfo.shopDesignerNum
          } else {
            this.shopBaseinfo.shopDesignerNum = 0
          }
          this.windowLabelPoint.lng = lng
          this.windowLabelPoint.lat = lat
          this.infoWindow.show = true
        })
    }
  },
  components: {
    BaiduMap,
    BmLabel,
    BmInfoWindow
  }
}

在vue baidu map中依然遵守數據改變視圖更新

使用vue baidu map時我想將地址解析出來並在地圖上描點，在vue baidu map的官方文檔上沒看到。可以在百度地圖官方文檔中找，可使用Geocoder()構造函數，創建一個地址解析器的實例。用法如下：

    var myGeo = new BMap.Geocoder();
    // 將地址解析結果顯示在地圖上,並調整地圖視野
    myGeo.getPoint("北京市海淀區上地10街", function(point){
        if (point) {
            map.centerAndZoom(point, 16);
            map.addOverlay(new BMap.Marker(point));
        }else{
            alert("您選擇地址沒有解析到結果!");
        }
    }, "北京市");

 獲取當前位置經緯度

let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        let point = r.point.lng + ',' + r.point.lat;
        
    }else {
        console.log('failed' + this.getStatus());
    }
}, { enableHighAccuracy: true })