写一个vue接入高德地图选点的示例

好的，以下是一个简单的 Vue 接入高德地图选点的示例：

1. 在 index.html 中引入高德地图的 js 文件

<script src="//webapi.amap.com/maps?v=1.4.10&key=your-amap-key"></script>

2. 在 App.vue 中创建地图容器和初始化地图

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    // 创建地图容器
    const map = new AMap.Map("map-container", {
      zoom: 10
    });
    // 初始化地图
    AMap.plugin("AMap.Geolocation", () => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：5s
        buttonPosition: "RB", // 定位按钮的停靠位置
        zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
    });
  }
};
</script>

3. 添加选点功能

<template>
  <div>
    <div id="map-container"></div>
    <div>
      <button @click="choosePoint">选点</button>
      <span>经度: {{ location.lng }}</span>
      <span>纬度: {{ location.lat }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      location: {} // 保存选定的经纬度
    };
  },
  mounted() {
    const map = new AMap.Map("map-container", {
      zoom: 10
    });
    AMap.plugin("AMap.Geolocation", () => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        buttonPosition: "RB",
        zoomToAccuracy: true
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
    });
  },
  methods: {
    choosePoint() {
      // 定义选点插件
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        buttonPosition: "RB",
        zoomToAccuracy: true
      });
      // 打开选点插件
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
      // 监听选点事件
      AMap.event.addListener(geolocation, "complete", result => {
        this.location.lng = result.position.lng;
        this.location.lat = result.position.lat;
      });
    }
  }
};
</script>

希望这个示例对你有所帮助！