场景

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上，怎样使用插件实现搜索定位效果如下

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

https://github.com/stefanocudini/leaflet-search

2、下载源码，引入所需要的leaflet-search.js文件，这里以example中simple.html为例，引入所需要的图标文件

3、这里直接在html中引入css文件，并修改其中图片的路径

        .leaflet-container .leaflet-control-search {position: relative;float: left;background: #fff;color: #1978cf;border: 2px solid rgba(0, 0, 0, 0.2);background-clip: padding-box;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;background-color: rgba(255, 255, 255, 0.8);z-index: 1000;margin-left: 10px;margin-top: 10px;}.leaflet-control-search.search-exp {/*expanded*/background: #fff;border: 2px solid rgba(0, 0, 0, 0.2);background-clip: padding-box;}.leaflet-control-search .search-input {display: block;float: left;background: #fff;border: 1px solid #666;border-radius: 2px;height: 22px;padding: 0 20px 0 2px;margin: 4px 0 4px 4px;}.leaflet-control-search.search-load .search-input {background: url('./icon/loader.gif') no-repeat center right #fff;}.leaflet-control-search.search-load .search-cancel {visibility: hidden;}.leaflet-control-search .search-cancel {display: block;width: 22px;height: 22px;position: absolute;right: 28px;margin: 6px 0;background: url('./icon/search-icon.png') no-repeat 0 -46px;text-decoration: none;filter: alpha(opacity=80);opacity: 0.8;}.leaflet-control-search .search-cancel:hover {filter: alpha(opacity=100);opacity: 1;}.leaflet-control-search .search-cancel span {display: none;/* comment for cancel button imageless */font-size: 18px;line-height: 20px;color: #ccc;font-weight: bold;}.leaflet-control-search .search-cancel:hover span {color: #aaa;}.leaflet-control-search .search-button {display: block;float: left;width: 30px;height: 30px;background: url('./icon/search-icon.png') no-repeat 4px 4px #fff;border-radius: 4px;}.leaflet-control-search .search-button:hover {background: url('./icon/search-icon.png') no-repeat 4px -20px #fafafa;}.leaflet-control-search .search-tooltip {position: absolute;top: 100%;left: 0;float: left;list-style: none;padding-left: 0;min-width: 120px;max-height: 122px;box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);background-color: rgba(0, 0, 0, 0.25);z-index: 1010;overflow-y: auto;overflow-x: hidden;cursor: pointer;}.leaflet-control-search .search-tip {margin: 2px;padding: 2px 4px;display: block;color: black;background: #eee;border-radius: .25em;text-decoration: none;white-space: nowrap;vertical-align: center;}.leaflet-control-search .search-button:hover {background-color: #f4f4f4;}.leaflet-control-search .search-tip-select,.leaflet-control-search .search-tip:hover {background-color: #fff;}.leaflet-control-search .search-alert {cursor: pointer;clear: both;font-size: .75em;margin-bottom: 5px;padding: 0 .25em;color: #e00;font-weight: bold;border-radius: .25em;}

4、完整示例代码


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet实现搜索定位</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}.leaflet-container .leaflet-control-search {position: relative;float: left;background: #fff;color: #1978cf;border: 2px solid rgba(0, 0, 0, 0.2);background-clip: padding-box;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;background-color: rgba(255, 255, 255, 0.8);z-index: 1000;margin-left: 10px;margin-top: 10px;}.leaflet-control-search.search-exp {/*expanded*/background: #fff;border: 2px solid rgba(0, 0, 0, 0.2);background-clip: padding-box;}.leaflet-control-search .search-input {display: block;float: left;background: #fff;border: 1px solid #666;border-radius: 2px;height: 22px;padding: 0 20px 0 2px;margin: 4px 0 4px 4px;}.leaflet-control-search.search-load .search-input {background: url('./icon/loader.gif') no-repeat center right #fff;}.leaflet-control-search.search-load .search-cancel {visibility: hidden;}.leaflet-control-search .search-cancel {display: block;width: 22px;height: 22px;position: absolute;right: 28px;margin: 6px 0;background: url('./icon/search-icon.png') no-repeat 0 -46px;text-decoration: none;filter: alpha(opacity=80);opacity: 0.8;}.leaflet-control-search .search-cancel:hover {filter: alpha(opacity=100);opacity: 1;}.leaflet-control-search .search-cancel span {display: none;/* comment for cancel button imageless */font-size: 18px;line-height: 20px;color: #ccc;font-weight: bold;}.leaflet-control-search .search-cancel:hover span {color: #aaa;}.leaflet-control-search .search-button {display: block;float: left;width: 30px;height: 30px;background: url('./icon/search-icon.png') no-repeat 4px 4px #fff;border-radius: 4px;}.leaflet-control-search .search-button:hover {background: url('./icon/search-icon.png') no-repeat 4px -20px #fafafa;}.leaflet-control-search .search-tooltip {position: absolute;top: 100%;left: 0;float: left;list-style: none;padding-left: 0;min-width: 120px;max-height: 122px;box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);background-color: rgba(0, 0, 0, 0.25);z-index: 1010;overflow-y: auto;overflow-x: hidden;cursor: pointer;}.leaflet-control-search .search-tip {margin: 2px;padding: 2px 4px;display: block;color: black;background: #eee;border-radius: .25em;text-decoration: none;white-space: nowrap;vertical-align: center;}.leaflet-control-search .search-button:hover {background-color: #f4f4f4;}.leaflet-control-search .search-tip-select,.leaflet-control-search .search-tip:hover {background-color: #fff;}.leaflet-control-search .search-alert {cursor: pointer;clear: both;font-size: .75em;margin-bottom: 5px;padding: 0 .25em;color: #e00;font-weight: bold;border-radius: .25em;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/leaflet-search.js"></script><script type="text/javascript">//sample data values for populate mapvar data = [{"loc": [41.575330, 13.102411],"title": "aquamarine"},{"loc": [41.575730, 13.002411],"title": "black"},{"loc": [41.807149, 13.162994],"title": "blue"},{"loc": [41.507149, 13.172994],"title": "chocolate"},{"loc": [41.847149, 14.132994],"title": "coral"},{"loc": [41.219190, 13.062145],"title": "cyan"},{"loc": [41.344190, 13.242145],"title": "darkblue"},{"loc": [41.679190, 13.122145],"title": "Darkred"},{"loc": [41.329190, 13.192145],"title": "Darkgray"},{"loc": [41.379290, 13.122545],"title": "dodgerblue"},{"loc": [41.409190, 13.362145],"title": "gray"},{"loc": [41.794008, 12.583884],"title": "green"},{"loc": [41.805008, 12.982884],"title": "greenyellow"},{"loc": [41.536175, 13.273590],"title": "red"},{"loc": [41.516175, 13.373590],"title": "rosybrown"},{"loc": [41.506175, 13.273590],"title": "royalblue"},{"loc": [41.836175, 13.673590],"title": "salmon"},{"loc": [41.796175, 13.570590],"title": "seagreen"},{"loc": [41.436175, 13.573590],"title": "seashell"},{"loc": [41.336175, 13.973590],"title": "silver"},{"loc": [41.236175, 13.273590],"title": "skyblue"},{"loc": [41.546175, 13.473590],"title": "yellow"},{"loc": [41.239190, 13.032145],"title": "white"}];var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//图层包含搜索的元素var markersLayer = new L.LayerGroup(); //layer contain searched elementsmap.addLayer(markersLayer);//添加搜索插件var controlSearch = new L.Control.Search({position: 'topright',layer: markersLayer,initial: false,zoom: 12,marker: false});map.addControl(controlSearch);//用来自样本数据的标记填充地图populate map with markers from sample datafor (i in data) {var title = data[i].title, //value searchedloc = data[i].loc, //position foundmarker = new L.Marker(new L.latLng(loc), {title: title}); //se property searchedmarker.bindPopup('title: ' + title);markersLayer.addLayer(marker);}</script>
</body></html>

Leaflet中使用leaflet-search插件实现搜索定位效果相关推荐

Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现要素轨迹移动效果. 插 ...
Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现水流模拟效果. 水流模 ...
Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样实现地图全屏效果. ...
Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面加载地 ...

Leaflet中使用leaflet-search插件实现搜索定位效果

场景

实现

Leaflet中使用leaflet-search插件实现搜索定位效果相关推荐

最新文章

热门文章