vue高德地图关键词搜索，点击选点

初始化地图

const initMap = () => {
  AMapLoader.load({
    key: '自己的key', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch'],
  })
    .then((AMap) => {
      AMap1.value = AMap
      // 初始化地图
      map.value = new AMap.Map('map-location', { //map-location为地图容器的id
        viewMode: '3D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [116.26755900, 39.91547100], //默认中心点
        resizeEnable: true,
      })
      // 创建引入搜索组件
      const placeSearch = new AMap.PlaceSearch({
        pageSize: 5, // 单页显示结果条数
        pageIndex: 1, // 页码
        // city: "010", // 兴趣点城市
        citylimit: false, // 是否强制限制在设置的城市内搜索
        map: map.value, // 展现结果的地图实例
        panel: 'info', // 展示结果容器的id。
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      })
      placeSearchRef.value = placeSearch
      // 主要就是使用placeSearch.search('关键词')  我这里在外部使用，将变量保存一下
    })
    .catch((e) => {
      console.log(e)
    })
}

搜索关键词 

const keyword= ref('') // keyword 为input的value
watch(() => keyword.value, (newVal) => {
  if (newVal) {
  // 搜索函数
    placeSearchRef.value.search(newVal)
  }
  else {
   // 为空清空结果
    placeSearchRef.value.clear()
  }
}, {
  deep: true,
  // immediate: true,
})

全部代码

<!--
  Description: 高德地图选点搜索
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '换成自己的', // 后期需替换
}
// 地图实例
const placeSearchRef = ref()
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: '换成自己的', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map('map-location', {
        viewMode: '3D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [116.26755900, 39.91547100],
        resizeEnable: true,
      })
      // 清除所有图层
      map.value.clearMap()
      // 创建引入搜索组件
      const placeSearch = new AMap.PlaceSearch({
        pageSize: 5, // 单页显示结果条数
        pageIndex: 1, // 页码
        // city: "010", // 兴趣点城市
        citylimit: false, // 是否强制限制在设置的城市内搜索
        map: map.value, // 展现结果的地图实例
        panel: 'info', // 结果列表将在此容器中进行展示。
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      })
      placeSearchRef.value = placeSearch
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(async () => {
  initMap()
})
onBeforeUnmount(() => {
  // 解绑事件
  map.value.clearMap()
  map.value.destroy()
})
const keyword= ref('')
watch(() => keyword.value, (newVal) => {
  if (newVal) {
    // 搜索函数
    placeSearchRef.value.search(newVal)
  }
  else {
    // 关键词为空时清空结果
    placeSearchRef.value.clear()
  }
}, {
  deep: true,
  // immediate: true,
})
</script>

<template>
  <div class="box" style="position: relative;">
    <div id="map-location" style="width: 100%; height: 500px;" />
    <div class="info">
      <div class="input-item">
        <el-input v-model="keyword" placeholder="请输入关键字" clearable />
      </div>
    </div>
    <div id="info" />
  </div>
</template>

<style lang="scss" scoped>
.box {
  position: relative;
}

#info {
  width: 270px;
  position: absolute;
  top: 34px;
  right: 0;
}

#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}

.info {
  // padding: 0.5rem 0.7rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  background-color: #fff;
  width: auto;
  min-width: 270px;
  border-width: 0;
  right: 0;
  // box-shadow: 0 2px 6px 0 rgb(240 131 0 / 50%);

  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 2.2rem;
    border: 1px solid #ccc;
    border-radius: 0.2rem;

  }
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}
</style>

效果

 需要注意 

普通用户 一天一百次机会