【VUE - 工具 - 高德地图】06、vuecli3 web端引入高德地图 拿到当前定位信息

一、注册高德地图开发者账号

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )

4. 地址：高德地图开发者平台

二、项目引入

1. 找到index.html页面
   引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script>

2. 需要使用定位的页面的created阶段调用高德定位服务，找到浏览器定位

	getLocation(){ // 在高德地图jsapi获取浏览器定位  当前为精准定位
        AMap.plugin('AMap.Geolocation', function() {
          let geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000
          })

          geolocation.getCurrentPosition()
          AMap.event.addListener(geolocation, 'complete', onComplete)
          AMap.event.addListener(geolocation, 'error', onError)

          function onComplete (data) {
            // data是具体的定位信息 
            console.log(data)
          }

          function onError (data) {
            // 定位出错
          }
        })
    },

注意：高德文档介绍 “因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率在5%左右。”
解决办法：使用非精准定位
当精准定位失败：在onError事件处理函数中调用方法getLatLngLocation 当前为使用非精准定位 ip定位，查询到当前所在城市的相关信息

	AMap.plugin('AMap.CitySearch', function () {
       let citySearch = new AMap.CitySearch()
       citySearch.getLocalCity(function (status, result) {
         if (status === 'complete' && result.info === 'OK') {
           // 查询成功，result即为当前所在城市信息
           // 当前result中包含 查询到的城市编码以及经纬度等信息
         }
       })
     })

之后进入高德地图的地理编码与逆地理编码，找到逆地理编码的代码，放入上边代码的if判断语句中

AMap.plugin('AMap.Geocoder', function() {
	 let geocoder = new AMap.Geocoder({
	   // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
	   city: result.adcode // 当前位置修改为真实得到的城市code
	 })
	 let lnglat = result.rectangle.split(";")[0].split(",") // 对result的经纬度进行解析
	 geocoder.getAddress(lnglat, function(status, data) {
	   if (status === 'complete' && data.info === 'OK') {
	     // data为对应的地理位置详细信息
	   }
	 })
})

通过上边步骤即可得到当前定位的信息，之后处理信息渲染到页面相关位置即可

以下是完整逻辑代码：

created(){
 	this.getLocation()
},
methods: {
  getLocation(){ // 从高德地图api获取浏览器定位
    const that = this
    AMap.plugin('AMap.Geolocation', function() {
      let geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000
      })

      geolocation.getCurrentPosition()
      AMap.event.addListener(geolocation, 'complete', onComplete)
      AMap.event.addListener(geolocation, 'error', onError)

      function onComplete (data) {
        // data是具体的定位信息
        console.log(data)
      }

      function onError (data) {
        // 定位出错
        that.getLatLngLocation()
      }
    })
  },
  getLatLngLocation(){
    AMap.plugin('AMap.CitySearch', function () {
      let citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          AMap.plugin('AMap.Geocoder', function() {
            let geocoder = new AMap.Geocoder({
              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              city: result.adcode
            })
            let lnglat = result.rectangle.split(";")[0].split(",")
            geocoder.getAddress(lnglat, function(status, data) {
              if (status === 'complete' && data.info === 'OK') {
                // data为对应的地理位置详细信息
              }
            })
          })
        }
      })
    })
  }
}