1 前言

要在vue專案使用百度地圖api，首先應做以下配置

（1）index.html

index.html新增script

 <script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地圖祕鑰（ak）&callback=bMapInit"></script>

（2）webpack.base.conf.js

webpack.base.conf.js新增externals配置，內容如下，與entry平級

  entry: {
    app: ['babel-polyfill', './src/main.js'
 
]
  },
  externals: {
    'BMap': 'BMap'
  },

（3）元件中引用

import BMap from 'BMap'

隨後便可根據你所需的功能新增相應的地圖api，並作出vue專案應有的更改即可。

2 應用舉例

需求分析：點選按鈕彈出地圖，地圖可搜尋位置，可切換城市，搜尋出來的位置需要在地圖中定點，除了搜尋外，可以通過拖動地圖然後點選選擇位置，選擇出來的位置需要記錄經緯度，傳遞到父元件。
實現：本例子不實現點選按鈕彈出功能，這個比較簡單，fixed定位寫個彈框即可。

實現效果

地圖元件：

父元件：
點選確定，父元件獲取到經緯度（demo只作列印處理）。

demo地圖元件原始碼

<template>
  <div class="map" v-show="visible">
    <div id="map-core"></div>
    <div class="search">
      <div id="r-result">
        <p>搜尋定位:</p>
        <input type="text" id="suggestId" value="百度"/>
      </div>
      <div
 
 class="lng-lat">
        <div class="item">
          <p>當前經度:</p>
          <input type="text" v-model="location.lng"/>
        </div>
        <div class="item">
          <p>當前緯度:</p>
          <input type="text" v-model="location.lat"/>
        </div>
        <div class="item btn"><button @click="selectLocation">確定</button></div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import BMap from 'BMap'
export default {
  data () {
    return {
      location: {
        lng: '',
        lat: ''
      },
      map: {},
      ac: {}
    }
  },
  mounted () {
    this.setMap()
    this.setSearch()
  },
  methods: {
    // 初始化地圖
    setMap () {
      this.map = new BMap.Map('map-core')
      this.map.centerAndZoom(new BMap.Point(113.275, 23.117), 10)
      // 地圖縮放控制元件
      const topLeftControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})
      // 城市選擇控制元件
      const cityListControl = new BMap.CityListControl({anchor: BMAP_ANCHOR_TOP_RIGHT})
      // 比例尺控制元件
      const topLeftNavigation = new BMap.NavigationControl()
      this.map.addControl(topLeftControl)
      this.map.addControl(topLeftNavigation)
      this.map.addControl(cityListControl)
      const _this = this
      // 滑鼠縮放
      setTimeout(function () {
        _this.map.setZoom(11)
      }, 2000) // 2秒後放大到11級
      this.map.enableScrollWheelZoom(true)
      // 點選獲取經緯度
      this.map.addEventListener('click', function (e) {
        _this.location.lng = parseFloat(e.point.lng).toFixed(3)
        _this.location.lat = parseFloat(e.point.lat).toFixed(3)
      })
    },
    // 根據經緯度繪製地圖中的座標點
    drawLocation () {
      if(this.location.lng !== "" && this.location.lat !== ""){
        this.map.clearOverlays()
        const new_point = new BMap.Point(this.location.lng, this.location.lat)
        const marker = new BMap.Marker(new_point)
        this.map.addOverlay(marker)
        this.map.panTo(new_point) 
      }
    },
    // 搜尋位置功能實現
    setSearch () {
      const _this = this
      //建立一個自動完成的物件
      this.ac = new BMap.Autocomplete({"input" : "suggestId", "location" : _this.map})
      //滑鼠放在下拉列表上的事件
      this.ac.addEventListener("onhighlight", function(e) {
        let str = ""
        let _value = e.fromitem.value
        let value = ""
        if (e.fromitem.index > -1) {
          value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
        }
        value = ""
        if (e.toitem.index > -1) {
          _value = e.toitem.value
          value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
        }
      })
      let myValue
      //滑鼠點選下拉列表後的事件
      this.ac.addEventListener("onconfirm", function(e) {
      let _value = e.item.value
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
        _this.setPlace(myValue)
      });
    },
    setPlace (myValue) {
      const _this = this
      //清除地圖上所有覆蓋物
      this.map.clearOverlays()
      //智慧搜尋
      this.local = new BMap.LocalSearch(_this.map, {
        onSearchComplete: _this.onSearchComplete
      });
      this.local.search(myValue);
    },
    onSearchComplete () {
      //獲取第一個智慧搜尋的結果
      let pp = this.local.getResults().getPoi(0).point
      this.location.lng = parseFloat(pp.lng).toFixed(3)
      this.location.lat = parseFloat(pp.lat).toFixed(3)
      this.map.centerAndZoom(pp, 18)
      //新增標註
      this.map.addOverlay(new BMap.Marker(pp))
    },
    // 向父元件傳遞經緯度
    selectLocation () {
      this.$emit('selectLocation', this.location)
    }
  },
  watch: {
    'location': {
      handler () {
        this.drawLocation()
      },
      deep: true
    },
    visible () {
      console.log('ddd')
    }
  }
}
</script>

<style lang="less" scoped>
  .map {
    width: 100%;
    height: 100%;
    font-size: 14px;
    #map-core {
      width: 100%;
      height: 90%;
    }
    .search {
      display: flex;
      margin-top: 10px;
      height: 40px;
      #r-result {
        display: flex;
        height: 20px;
        line-height: 20px;
        p {
          height: 20px;
          padding-right: 10px;
        }
        input {
          width: 180px;
          height: 20px;
        }
      }
      .lng-lat {
        display: flex;
        .item {
          display: flex;
          padding-left: 10px;
          height: 20px;
          line-height: 20px;
          p {
            height: 20px;
            padding-right: 10px;
          }
          input {
            width: 100px;
            height: 20px;
          }
          button {
            color: #fff;
            height: 28px;
            width: 60px;
            background: #40B0FF;
            border: 1px solid #40B0FF;
            border-radius: 2px;
            &:hover {
              background: #10B0FF;
              border: 1px solid #10B0FF;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>

地圖父元件中使用方法

  <v-map @selectLocation="selectLocation"></v-map>

methods

    selectLocation (location) {
      console.log(location)
      console.log(parseFloat(location.lng))
      console.log(parseFloat(location.lat))
    }

解析請看程式碼中的註釋，本例子旨在於舉例vue專案使用百度地圖的方法，僅注重js實現，css部分有情趣請自行改善，有錯誤歡迎指出。
友情連結：百度地圖api官網：http://lbsyun.baidu.com/jsdemo.htm#lite_2_1