使用Vue3+ElementPlus+高德地图实现在浏览器中搜索地点并被标记在地图中

<template>
  <div class="map-container">
    <el-amap class="map" :vid="'amap'" :zoom="10">
      <!-- 地点标记 -->
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker"
      ></el-amap-marker>
    </el-amap>
    <!-- 搜索地点输入框 -->
    <el-input v-model="searchKeyword" @keyup.enter="searchLocation" placeholder="请输入地点"></el-input>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      markers: [], // 地图上的标记点
    };
  },
  methods: {
    searchLocation() {
      // 调用高德地图API进行地点搜索
      this.$http.get('https://restapi.amap.com/v3/place/text', {
        params: {
          key: '你的高德地图API Key',
          keywords: this.searchKeyword,
          city: '北京市',
        },
      }).then(response => {
        const location = response.data.pois[0];
        if (location) {
          // 将搜索到的地点添加到地图中
          this.markers = [{ lng: location.location.lng, lat: location.location.lat }];
        }
      });
    },
  },
};
</script>
 
<style>
.map-container {
  position: relative;
  height: 400px;
}
.map {
  height: 100%;
}
</style>

在这个代码实例中，我们使用了Element Plus的el-input组件来创建一个搜索框，用户可以在其中输入搜索关键词并按回车键以搜索地点。我们还使用了高德地图API来获取搜索结果，并使用了Element Plus的el-amap和el-amap-marker组件来在地图上显示标记。这个例子展示了如何将Vue3、Element Plus和高德地图API结合起来，为用户提供一个基本的地点搜索和标记功能。