记录在vue项目中使用高德地图js API的过程

首先注册账号申请key

项目中引入api

1. 在开发文档中的“准备”目录中复制api，引入vue项目的index.html中，替换key
   
2. 项目主要使用的是定位服务，在菜单中找到定位的api写到项目App.vue中,让页面一加载就获取定位信息、
   

<template>
  <div id="app">

    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'app',
    created() {
      this.getLocation()
    },
    methods: {
      getLocation() {
        AMap.plugin('AMap.Geolocation', function () {
          var 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) {
            // 定位出错
            console.log('定位失败错误：', data)
          }
        })
      }
    }
  }


</script>

注意：完成上面步骤可能还获取不到位置信息，因为高德默认采用的是高精度定位，这里还需要处理一下。处理如下：
在上面的精准定位失败回调中调用这个方法即可获取位置信息

getLngLatLocation() {
        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)
            }
          })
        })
      }

此时，只是获取到了地址的经纬度，要想更详细饿地址信息，就要使用逆向解析

AMap.plugin('AMap.Geocoder', function() {
                var geocoder = new AMap.Geocoder({
                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                  city: result.adcode
                })

                var lnglat = result.rectangle.split(';')[0].split(',')

                geocoder.getAddress(lnglat, function(status, data) {
                  if (status === 'complete' && data.info === 'OK') {
                    // result为对应的地理位置详细信息
                    console.log(data)
                  }
                })
              })

最终，就实现了两种方式定位（高精度和逆解析），放上全部的代码

<template>
  <div id="app">

    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'app',
    created() {
      this.getLocation()
    },
    methods: {
      getLocation() {
        const self = this
        AMap.plugin('AMap.Geolocation', function () {
          var 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) {
            // 定位出错
            console.log('定位失败错误：', data)
            self.getLngLatLocation()
          }
        })
      },
      getLngLatLocation() {
        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)
              //逆向地理编码
              AMap.plugin('AMap.Geocoder', function() {
                var geocoder = new AMap.Geocoder({
                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                  city: result.adcode
                })

                var lnglat = result.rectangle.split(';')[0].split(',')

                geocoder.getAddress(lnglat, function(status, data) {
                  if (status === 'complete' && data.info === 'OK') {
                    // result为对应的地理位置详细信息
                    console.log(data)
                  }
                })
              })
            }
          })
        })
      }
    }
  }


</script>

打印结果