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

添加页面控件

	<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