vue+高德地图 逆地理编码和设置marker

<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 高德地图API
      const map = new AMap.Map('container', {
        zoom: 11,
        center: [116.397428, 39.90923] // 设置中心点坐标
      });
 
      // 点击地图任意位置设置标记点
      map.on('click', (e) => {
        // 清除已有的标记点
        map.clearMap();
        // 创建新的标记点
        const marker = new AMap.Marker({
          map: map,
          position: e.lnglat, // 设置标记点位置
        });
        // 显示标记点
        marker.setMap(map);
 
        // 逆地理编码
        const geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all',
        });
        geocoder.getAddress(e.lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              console.log(result.regeocode.formattedAddress); // 输出逆地理编码结果
            }
          }
        });
      });
    }
  }
}
</script>
 
<style>
#app {
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
</style>

这段代码首先在Vue组件的mounted钩子中初始化了高德地图，并在地图上设置了点击事件，用于在用户点击地图时设置一个新的标记点，并进行逆地理编码来获取点击位置的详细地址信息。