添加页面控件
<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