vue 高德地图api爬坑之路（三）Autocomplete 和 PlaceSearch

最新推荐文章于 2025-06-28 17:59:59 发布

原创

最新推荐文章于 2025-06-28 17:59:59 发布 · 1.3w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #高德地图API

本文记录了在Vue项目中使用高德地图API进行Autocomplete和PlaceSearch功能实现的过程，包括添加页面控件、初始化插件的详细步骤，并展示了最终效果。虽然样式简单，但实现了功能需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加页面控件

	<div class="search-div" >
      <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称">
        <el-button slot="append" icon="el-icon-search" @click="searchKeyword"> 
          搜索
        </el-button>
      </el-input>
    </div>

初始化插件

编辑方法

	/** 初始化搜索工具 */
    mapSearchInit(){
   
   
      let that = this;
      // 绑定自动提示
      AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'], function(){
   
   
        var autoOptions = {
   
   
          input: "tipInput",	//值为界面上input空间id
          city: '北京',
        }
        var autoCompleteComponent= new AMap.Autocomplete(autoOptions);
        // 注册监听Autocomplete选中项
        AMap.event.addListener(autoCompleteComponent,"select",function(data){
   
   
          console.log(data);
          if ( data.poi.location != undefined){
   
   
            //定位到中心点
            console.log("定位中心点")
            that.map.setCenter(data.poi.location);

            //TODO 获取数据，对数据进行操作如：添加marker等
            
          }
        
        })
        that.autoCompleteComponent = autoCompleteComponent;
        // 注册placeSearch组件
        that.placeSearchComponent = new AMap.PlaceSearch({
   
   
          // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
          city: '北京'
        })
      });
    },
    /** 关键词搜索 */
    searchKeyword(