在这里使用下拉菜单和输入框两个部分实现地图中位置的查询
搜索界面
<div class="search" style="z-index: 2000"> <div class="search-select"> <select name="" id="select" class="select"> <option value="">请选择---</option> <option v-for="item in kindList" v-bind:key="item.value" v-text="item.name" ></option> </select> </div> <div class="spilt"></div> <input type="text" name="find" id="find" class="search-find" placeholder="请输入内容" /> <button id="do-find" class="do-find"></button> <!-- <div class="btn_find"> <button></button> </div> --> </div>
js方法定义
需要引入Search 类
import Search from "@arcgis/core/widgets/Search";
// 添加搜索组件
var searchWidget = new Search({
view: mapView,
});
const btn_search = document.getElementById("do-find");
const input_find = document.getElementById("find");
btn_search.addEventListener("click",function(){
const select_value = document.getElementById("select");
// alert(select_value.value);
dosearch(select_value.value + input_find.value);
});
function dosearch(value){
searchWidget.search(value);
}
// 搜索组件添加结束