Vue使用百度地圖

Vue使用百度地圖

1、獲取AK值

百度地圖開發者平臺：百度地圖開發者平臺官網
首先登錄官網，可使用百度賬號直接登錄

然後點擊控制檯

然後點擊我的應用=>創建應用

輸入應用名稱，選中應用類型以及需要使用的API即可；下面的白名單可以設置未"*"，允許所有網址直接訪問，或者設置爲自己的網站名
因爲要使用Vue整合百度地圖在前端展示，所以我這裏選擇的是瀏覽器端

創建完成以後我們就可以得到一個AK值

2、Vue單頁面應用安裝Vue Baidu Map

Vue Baidu Map官方網站：vue-baidu-map官網
安裝方法：
通過npm install直接安裝：
首先進入項目地址，然後在終端中輸入以下命令（我是直接在vscode中打開項目進行的安裝）：

npm install vue-baidu-map --save

通過CDN方式導入：
這種方式我暫時還沒有用過

<script src="https://unpkg.com/vue-baidu-map"></script>

3、全局註冊or局部註冊

因爲我這裏只有一個頁面用到了百度地圖，所以我這裏選擇的是局部註冊，當然全局註冊更爲方便，接下來兩種方法我都會介紹到。
全局註冊：
在main.js中一次性引入百度地圖的全部模塊

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

局部註冊：
直接在需要使用百度地圖的組件內引入相關的組件即可使用。

<template>
  <div>
    <baidu-map class="bm-view" ak='tQkYwG4oSbxkVV4fHlozuyKWNqESynxz' :scroll-wheel-zoom="true"></baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map'
export default {
  components: {
    BaiduMap: BaiduMap
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 675px;
}
</style>

4、實現的效果

5、添加定位、城市、縮放插件

<template>
  <div>
    <baidu-map class="bm-view" ak='tQkYwG4oSbxkVV4fHlozuyKWNqESynxz' center="濮陽市南樂縣" :scroll-wheel-zoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-marker :position="{lng: 115.1249531400, lat: 36.0445506400}" :dragging="true" @click="infoWindowOpen">
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
          勞動力人數:300;<br/>年齡分佈:;<br/>工資分佈:;<br/>工作種類分佈:;<br/>跨省跨地區流動工作人數:<br/>
          </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'
import BmCityList from 'vue-baidu-map/components/controls/CityList'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  data () {
    return {
      show: false
    }
  },
  components: {
    BaiduMap: BaiduMap,
    BmNavigation: BmNavigation,
    BmGeolocation: BmGeolocation,
    BmCityList: BmCityList,
    BmMarker: BmMarker,
    BmInfoWindow: BmInfoWindow
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 675px;
}
</style>

實現的具體效果如下圖：

6、問題

百度地圖的定位功能偏差較大，不知如何獲得精準定位，後續如果解決會繼續更新。

7.參考

參考博客：
https://www.cnblogs.com/Marco-hui/p/12155995.html