要
实现在
vue中
点击高德地图获取经纬度和
详细地址，可以按照以下步骤进行：
1. 在
vue项目中安装 `
vue-amap` 插件。可以使用npm安装，命令如下：
```
npm install
vue-amap --save
```
2. 在 `main.js` 中引入 `
vue-amap` 并进行初始化配置。
```javascript
import
VueAMap from '
vue-amap';
Vue.use(
VueAMap);
VueAMap.initAMapApiLoader({
key: 'your amap key',
plugin: ['AMap.Geocoder']
});
```
其中 `your amap key` 是你的
高德地图开发者Key，需要在高德开放平台上申请。
3. 在组件中引入 `Amap` 组件，并在 `mounted` 钩子函数中进行地图初始化以及监听地图
点击事件。
```
vue
<template>
<div>
<div id="map" style="height: 500px;"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
geocoder: null,
marker: null,
address: '',
lnglat: null
}
},
mounted() {
this.initMap();
this.initGeocoder();
this.addMapClickEvent();
},
methods: {
initMap() {
this.map = new AMap.Map('map', {
zoom: 13,
center: [116.397428, 39.90923]
});
},
initGeocoder() {
this.geocoder = new AMap.Geocoder({
city: "北京"
});
},
addMapClickEvent() {
let self = this;
this.map.on('click', function(e) {
self.lnglat = e.lnglat;
self.getAddressByLngLat();
self.addMarker();
});
},
getAddressByLngLat() {
let self = this;
this.geocoder.getAddress(this.lnglat, function(status, result) {
if (status === 'complete' && result.regeocode) {
self.address = result.regeocode.formattedAddress;
}
});
},
addMarker() {
if (this.marker) {
this.map.remove(this.marker);
}
this.marker = new AMap.Marker({
position: this.lnglat,
});
this.map.add(this.marker);
}
}
}
</script>
```
4. 在 `data` 中定义需要用到的变量，如 `map` 表示地图对象、 `geocoder` 表示逆
地址解析对象、 `marker` 表示标记点对象、 `address` 表示
详细地址、 `lnglat` 表示
经纬度。
5. 在 `mounted` 钩子函数中，先调用 `initMap` 方法初始化地图对象，然后调用 `initGeocoder` 方法初始化逆
地址解析对象，最后调用 `addMapClickEvent` 方法监听地图
点击事件。
6. 在 `addMapClickEvent` 方法中，使用 `map.on('click', function(e) {...})` 监听地图
点击事件，并在回调函数中
获取点击位置的
经纬度并保存到 `lnglat` 变量中，然后调用 `getAddressByLngLat` 方法通过
经纬度获取详细地址，并调用 `addMarker` 方法在地图上
添加标记点。
7. 在 `getAddressByLngLat` 方法中，调用逆
地址解析对象的 `getAddress` 方法，根据
经纬度获取详细地址，并将
地址保存到 `address` 变量中。
8. 在 `addMarker` 方法中，先判断是否已有标记点，如果有则先移除旧的标记点，然后创建新的标记点并
添加到地图上。
9. 最后，在模板中使用 `id="map"` 定义地图容器，并
添加样式 `style="height: 500px;"`。
1031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
