Leaflet学习，地名搜索定位功能实现

在百度地图中，有这样一个功能，在搜索框中输入一个地名，系统给返回信息，然后点击信息定位到该地；

思路：首先我们放一个搜索框，搜素结果放在一个table中，注意，这个table应当初始化为空，不展示出来，当搜索完成后，加载数据，当搜索框清空后，table应当被清空，并进行隐藏，当点击table时触发事件，定位到该点；搜索结果会通过插件leaflet-geosearch获取；

以搜索"beijing"为例，返回的内容为：

好，接下来我们先新建一个搜索框和table组件,组件命名为searchContainer.vue；

<template>
 <div>
 <SearchBox id="search"
 placeholder="请输入地名"
 v-model="value"
 @search="onSearch($event)">
 </SearchBox>
 <el-table id="table"
 :data="tableData"
 style="width: 300px">
 <el-table-column
 prop="name"
 label="名称">
 </el-table-column>
 <el-table-column
 prop="xy"
 label="坐标">
 </el-table-column>
 </el-table>
 </div>
</template>
 
<script>
export default {
 name: "search",
 data () {
 return {
 value: null,
 tableData: []
 };
 },
 methods: {
 onSearch (event) {
 this.value = event.value;
 }
 }
};
</script>
<style>
#search {
 z-index: 1000;
 position: absolute;
 top: 20px;
 right: 20px;
 width: 300px;
 height: 40px;
}
#table{
 z-index: 1000;
 position: absolute;
 top: 63px;
 right: 20px;
 width: 300px;

}
</style>

注册组件并使用；

当我们点击搜索按钮时，返回数据：

onSearch (event) {
 this.value = event.value;
 const provider = new OpenStreetMapProvider();
 provider.search({ query: this.value }).then((result) => {
 console.log(result)
 });
 }

将返回的数据处理下，绑定到table中；

results.forEach(result => {
 this.tableData.push({ xy: result.x + ',' + result.y, name: result.label })
})

返回的tableData格式是这样的；

table中展示是这样的：

下一步就是，点击列表，获取坐标信息，在地图上展示该点；

getPoint (point, info) {
 var popup = L.popup().setLatLng(point).setContent(info);
 this.map.openPopup(popup);
 this.map.setView(point, 10)
 }

查看效果如下：

搜索出来的table，应当默认为关闭的，我们可以使用v-show进行控制；