将本地搜索功能添加到传单 JS 库

Adding a LocalSearch facility to Leaflet JS Library

本文关键字:JS 添加 搜索 功能      更新时间:2023-09-26

我正在尝试将本地搜索工具添加到传单JS库中,我以前从未使用过它,所以不太确定如何去做。我已经复制了缩放控件的工作方式,因此我添加了这个额外的功能:

L.Control.LocalSearch = L.Class.extend({
onAdd: function (a) {
    this._map = a,
    this._container = L.DomUtil.create("div", "leaflet-control-zoom"),
    this._localSearch = this._createSearch(leafletmapsmarker_L10n.search_form, "leaflet-control-zoom-in", this._map.zoomIn, this._map),
    this._container.appendChild(this._localSearch)
},
getContainer: function () {
    return this._container
},
getPosition: function () {
    return L.Control.Position.BOTTOM_LEFT
},
_createSearch: function (a, b, c, d) {
    var e = document.createElement("a");
    return e.href = "#", 
    e.title = a,
    e.className = b,
    L.Browser.touch || L.DomEvent.disableClickPropagation(e),
    L.DomEvent.addListener(e, "click", L.DomEvent.preventDefault),
    L.DomEvent.addListener(e, "click", c, d),
    e
}

然后像这样启动这个:

    _initControls: function () {
    this.options.searchControl && this.addControl(new L.Control.LocalSearch), this.options.zoomControl && this.addControl(new L.Control.Zoom), this.options.attributionControl && (this.attributionControl = new L.Control.Attribution, this.addControl(this.attributionControl))
},

所以基本上我需要弄清楚如何添加搜索功能。也许我以错误的方式解决这个问题,但我在网上找不到太多关于这个的信息,所以有人可以帮助我吗?

试试这个新的传单插件:传单搜索

在这里可以尝试更多演示:

https://opengeo.tech/maps/leaflet-search/