vue3使用高德地图输入地址标记

在Vue3中使用高德地图输入地址进行标记的基本步骤通常包括以下几个阶段：

1. 注册高德开放平台账号并获取API Key。
2. 在Vue3项目中安装高德地图的npm包，例如使用`npm install @amap/amap-jsapi-loader`。
3. 在组件中引入并使用`@amap/amap-jsapi-loader`进行地图实例的加载。
4. 使用高德地图提供的服务，如地址解析服务（GeocodingService），将用户输入的地址转换为地图上的经纬度坐标。
5. 将获取到的经纬度坐标作为参数，创建标记（Marker）并添加到地图上显示。

以下是一个简单的示例代码，展示了如何在Vue3中实现输入地址后标记地图：

<template>
  <div id="mapContainer" style="width: 100%; height: 500px;"></div>
  <input v-model="address" placeholder="输入地址" />
  <button @click="addMarker">标记</button>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

const address = ref('');
const map = ref(null);

onMounted(async () => {
  await AMapLoader.load({
    key: '你的API Key', // 替换为你的API Key
    version: '2.0', // 高德地图JS API的版本号
    plugins: ['AMap.Geocoder'], // 需要使用的插件列表
  });

  map.value = new AMap.Map('mapContainer', {
    zoom: 10,
  });
});

const addMarker = async () => {
  if (!map.value) {
    return;
  }

  const geocoder = new AMap.Geocoder();
  geocoder.getAddress(address.value, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      const marker = new AMap.Marker({
        map: map.value,
        position: result.regeocode.formattedAddress, // 使用地址解析的结果
      });
      map.value.setFitView(); // 地图自适应显示所有标记
    } else {
      alert('地址解析失败，请检查输入的地址是否正确！');
    }
  });
};
</script>

<style>
#mapContainer {
  width: 100%;
  height: 500px;
}
</style>

在上述代码中，首先在页面上提供了一个输入框用于用户输入地址，并且有一个按钮用于触发地址标记的动作。在`mounted`生命周期钩子中加载高德地图的JSAPI，并创建一个地图实例。`addMarker`方法则利用高德地图的地理编码服务将用户输入的地址转换为经纬度，并创建一个标记添加到地图上。