vue接入高德地图点击获取经纬度及省市区_el-amap点击地图获取经纬度和省市区信息

1. 安装vue-amap

npm install --save vue-amap
1

2. 在main.js中引入如下

// 引入地图
import aMap from 'vue-amap'

Vue.use(aMap)

aMap.initAMapApiLoader({
  key: '高德地图中申请的key',
  plugin: ['AMap.Geolocation', 'AMap.Geocoder']
})
1
2
3
4
5
6
7
8
9

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

          <el-row>
          <el-col :span="6">
            <el-form-item>
              详细地址：
              <el-input
                v-model="address"
                name="address"/>
            </el-form-item>
          </el-col>
        </el-row>
         
          <el-row>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              经度：
              <el-input
                v-model="lat"
                name="lat"
                type="number"/>
            </el-form-item>
          </el-col>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24