webpack中 VUE使用百度地圖獲取地理位置

百度地圖

1、index.html中引入 百度地圖api

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

 

2、在webpack.base.conf.js里面 配置

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
"BMap": "BMap"
},
}

 

3、引入使用，一定記住需要在mounted鈎子函數里面操作API 因為地圖需要在所以的dom樹加載完畢后才能操作

 import BMap from 'BMap'
  export default {
    data() {
      location: null
    },
    mounted() {
      let _this = this
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          const myGeo = new BMap.Geocoder()
          myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
            if (data.addressComponents) {
              const result = data.addressComponents
              const location = {
                creditLongitude: r.point.lat, // 經度
                creditLatitude: r.point.lng, // 緯度
                creditProvince: result.province || '', // 省
                creditCity: result.city || '', // 市
                creditArea: result.district || '', // 區
                creditStreet: (result.street || '') + (result.streetNumber || '') // 街道
              }
              _this.location = location
            }
          })
        }
      })
    }
}