准备写一下天气预报的项目，需要用到定位，就想着调用地图 API 然后就有了这篇笔记

使用的是高德的 javascript-api 文档地址：https://lbs.amap.com/api/javascript-api/reference/location

API key 申请地址：http://lbs.amap.com/dev/key/app

0.引入

首先引入，直接在入口 index.html 的头部直接引入即可

<script src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxx"></script>

1.说明

建议写入 mixin.js 然后再调用

官方的代码示例：

mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
  geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,//是否使用高精度定位，默认:true
    timeout: 10000, //超过10秒后停止定位，默认：无穷大
    maximumAge: 0, //定位结果缓存0毫秒，默认：0
    convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
    showButton: true, //显示定位按钮，默认：true
    buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
    showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
    panToLocation: true,  //定位成功后将定位到的位置作为地图中心点，默认：true
    zoomToAccuracy:true  //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  });
  mapObj.addControl(geolocation);
  geolocation.getCurrentPosition();
  AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
  AMap.event.addListener(geolocation, 'error', onError);  //返回定位出错信息
});

在 Vue CLI 4（或其它版本） 中当你复制到 Vue 的时候会发现 AMap 会报错，因为使用 AMap 这个构造函数需要通过在 vue.config.js 中配置：

module.exports = {
  configureWebpack: {
    externals: {
      AMap: 'AMap' // 高德地图配置
    }
  }
}

这样就可以愉快的玩耍了~

2.调用

新建 mixin.js 文件，代码如下：

import AMap from 'AMap'

export const AmapMixin = {
  methods: {
    getLocation() {
      AMap.plugin('AMap.Geolocation', function () {
        const geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 5000
        })
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', data => {
          console.log('具体的定位信息', data)
          console.log('lat', data.position.lat)
          console.log('lng', data.position.lng)
        })
        AMap.event.addListener(geolocation, 'error', data => {
          // 失败 启用 ip定位
          AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
                console.log('通过ip获取当前城市：', result)
                console.log('lat', result.position.lat)
                console.log('lng', result.position.lng)
              }
            })
          })
        })
      })
    }
  }
}

因为我只需要获取经纬度的信息，所以官方文档中的

mapObj = new AMap.Map('iCenter');
xxxx
mapObj.addControl(geolocation);
xxx

就不需要了，最后只需要引入 mixin.js 和在 mounted 中使用 this.getLocation() 就可以调用了

<template>
  <div class="home">
    Home
  </div>
</template>

<script>
  import { AmapMixin } from '../common/mixin'

  export default {
    name: 'Home',
    mixins: [AmapMixin],
    mounted() {
      this.getLocation()
    }
  }
</script>
可以看到是成功的

完结撒花~ yeah

参考：https://segmentfault.com/a/1190000012344678