Vue/cli 3.0中使用百度地圖api

1. 申請百度地圖ak

ak會在引入百度js的時候用到，你能夠點擊這裏申請一個惟一ak

---

2. 引入百度地圖js

在public/index.html裏面添加下面代碼，注意把「你的ak」替換成你申請的ak

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

---

3. 配置webpack

因爲cli3隱藏了webpack配置文件，因此咱們須要在根目錄建立一個vue.config.js文件，並寫入下面代碼

module.exports = {
  configureWebpack: {
    externals: {
      "BMap": "BMap"
    }
  }
}
複製代碼

vue會讀取該文件，併合併到webpack配置文件上面，若是你想了解更多關於cli3和webpack，你能夠點擊這裏

---

4. 單組件文件引入

若是你是打算在單文件組件內使用（後綴爲.vue文件），你能夠參考下面代碼

<template>
  <div id="map">
  </div>
</template>

<script>
import BMap from 'BMap'
export default {
  name: 'Map',
  data () {
    return {
    }
  },
  methods: {
    createMap () {
      /* eslint-disable */
      // 建立Map實例
      var map = new BMap.Map("map")
      // 初始化地圖,設置中心點座標和地圖級別
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      //添加地圖類型控件
      map.addControl(new BMap.MapTypeControl({
        mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
      }))
      // 設置地圖顯示的城市 此項是必須設置的
      map.setCurrentCity("北京")
      //開啓鼠標滾輪縮放
      map.enableScrollWheelZoom(true)
      /* eslint-enable */
    }
  },
  mounted () {
    this.createMap()
  }
}
</script>
<style scoped lang="stylus">
#map
  min-height 100vh
</style>

複製代碼

須要注意的是：

1. 若是你在mounted生命週期以前進行操做，會報錯。
2. 你須要給容器設置一個高度，否則默認爲0
3. 若是你使用eslint做爲代碼風格檢查，就須要如上面代碼那樣忽略檢查

---

結尾：以上只是簡單的時候，若有更復制的需求，請前往這裏尋找答案