vue集成百度地图实现搜索功能

<template>
  <div>
    <input v-model="searchQuery" @input="searchBaiduMap" placeholder="搜索位置" />
    <div v-if="searchResults.length">
      <ul>
        <li v-for="(result, index) in searchResults" :key="index" @click="handleResultClick(result)">
          {{ result.title }}
        </li>
      </ul>
    </div>
    <div id="map" style="width: 500px; height: 400px;"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      map: null,
    };
  },
  methods: {
    searchBaiduMap() {
      const that = this;
      // 调用百度地图API的搜索接口
      const local = new BMap.LocalSearch(this.map, {
        renderOptions: { map: that.map },
        onSearchComplete: function(results) {
          if (local.getStatus() === BMAP_STATUS_SUCCESS) {
            that.searchResults = []; // 清空之前的搜索结果
            for (let i = 0; i < results.getCurrentNumPois(); i++) {
              that.searchResults.push({
                title: results.getPoi(i).title,
                point: results.getPoi(i).point,
              });
            }
          }
        },
      });
      local.search(this.searchQuery);
    },
    handleResultClick(result) {
      this.map.centerAndZoom(result.point, 16);
    },
  },
  mounted() {
    this.map = new BMap.Map('map'); // 创建Map实例
    const point = new BMap.Point(116.404, 39.915); // 创建点坐标
    this.map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
  },
};
</script>

这个代码实例展示了如何在Vue应用中集成百度地图API实现搜索功能。用户可以在输入框中输入搜索内容，地图会根据输入进行搜索，并在搜索结果中显示位置列表。用户可以点击任意位置来重新中心地图到该位置。这个例子简洁明了，并且注重于教学如何在Vue中使用百度地图API。