1.vue中使用高德地图定位

记录在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>

打印结果

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页