vue接入高德地图点击获取经纬度及省市区

  1. 安装vue-amap
npm install --save vue-amap
  1. 在main.js中引入如下
// 引入地图
import aMap from 'vue-amap'

Vue.use(aMap)

aMap.initAMapApiLoader({
  key: '高德地图中申请的key',
  plugin: ['AMap.Geolocation', 'AMap.Geocoder']
})

在高德地图开发者中申请(https://lbs.amap.com/dev/key/app#)
3. index.vue中

          
          
            
              详细地址:
              
            
          
        
         
          
          
            
            
          
          
            
              经度:
              
            
          
          
            
            
          
          
            
              纬度:
              
            
          
          

          
          
            
            
          
          
            
              省份:
              
            
          
          
            
            
          
          
            
              市:
              
            
          
          
            
            
          
          
            
              区:
              
            
          
          

          
          
            
            
          
          
          
          
          

选择位置点击一下就可以了(要是地图没有出来,刷新一下页面)

  1. index.vue的data中
    let self = this;
    return {
      zoom: 12,
      center: [121.59996, 31.197646],
      address: '',
      province: '',
      city: '',
      district: '',
      lng: '',
      lat: '',
      events: {
       click(e) {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;

          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          
          geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                // 具体地址
                self.address = result.regeocode.formattedAddress;
                // 省
                self.province = result.regeocode.addressComponent.province;
                // 市
                self.city = result.regeocode.addressComponent.city;
                // 区
                self.district = result.regeocode.addressComponent.district;
                self.$nextTick();
              }
            }else {
              //alert('地址获取失败')
            }
          });        
        }
      },
  1. 样式
.amap-demo {
  height: 400px;
}
  1. 效果
    点击地图输入框中的数据就会跟着变
    vue接入高德地图点击获取经纬度及省市区_第1张图片

高德错误码说明点击获取
高德官网点击
vue官网

你可能感兴趣的