Vue3+Vite连接高德地图JS API——地图显示、输入搜索

<template>
  <div class="map-container">
    <div id="map" class="map"></div>
    <input v-model="searchValue" @keyup.enter="searchAddress" placeholder="请输入地址" />
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
 
const searchValue = ref('');
const map = ref(null);
 
const initMap = () => {
  map.value = new AMap.Map('map', {
    zoom: 11, // 缩放级别
    center: [116.397428, 39.90923], // 中心点坐标
  });
};
 
const searchAddress = () => {
  const geocoder = new AMap.Geocoder({
    radius: 1000,
    extensions: 'all',
  });
 
  geocoder.getLocation(searchValue.value, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      // 清除之前的标记
      map.value.clearMap();
      // 将地图中心设置为搜索结果的坐标
      map.value.setCenter(result.geocodes[0].location);
      // 添加标记
      map.value.addMarker({
        position: result.geocodes[0].location,
      });
    }
  });
};
 
onMounted(() => {
  AMapLoader.load({
    key: '您的高德API Key',
    version: '2.0',
    plugins: ['AMap.Geocoder'],
  }).then((AMap) => {
    initMap();
  }).catch(e => {
    console.error(e);
  });
});
</script>
 
<style>
.map-container {
  width: 100%;
  height: 400px;
}
.map {
  width: 100%;
  height: 100%;
}
</style>

这段代码使用了Vue3的<script setup>语法糖，并结合Vite构建工具。它展示了如何在Vue3项目中集成高德地图API，并实现地图显示、搜索地址并在地图上标记位置的功能。代码中使用了AMapLoader来异步加载高德地图的JavaScript API，并在组件加载后初始化地图。用户可以通过输入框输入地址并按下回车键来触发搜索，然后在地图上显示搜索结果。