Leaflet中使用leafletsearch插件实现搜索定位效果

场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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;
             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;
             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- 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;
             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;
             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;
             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- 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 map
        var 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 elements

        map.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 data
        for (i in data) {
            var title = data[i].title, //value searched
                loc = data[i].loc, //position found
                marker = new L.Marker(new L.latLng(loc), {
                    title: title
                }); //se property searched
            marker.bindPopup('title: ' + title);
            markersLayer.addLayer(marker);
        }
    </script>
</body>

</html>