Leaflet検索ボックス拡張機能を実装しました。
マウスを使用して地図上をパンすると、検索ボックスがすぐに消え、ユーザーは毎回クエリ全体を再入力する必要があります。
ユーザーがクリアボタンを押すまで検索ボックスとクエリをぶらぶらさせたいのですが。
display：block; 検索ボックスを表示/非表示にするために追加および削除されます。マウスを動かすのではなく、ユーザーがクエリをクリアしたときにのみ折りたたみが発生するようにしたいと思います。
または、ユーザーが毎回再入力する必要がないように、クエリを保持しようとしました。折りたたみイベントをキャッチし、クエリを保存します。しかし、その時点でボックスはすでにクリーンアップされており、覚えておくべきテキストはありません。
var timeout = {};
var oldQuery = "";
controlSearch.on('search:expanded', function () {
var searchBox = this._input;
searchBox.value = oldQuery;
this._input.onkeyup = function () {
clearInterval(timeout);
timeout = setTimeout(function () {
var query = searchBox.value;
search(query, searchItems, searchResultsLayer);
if (query.length > 0) {
if (!searchResultsShown) {
searchResultsLayer.addTo(map);
}
}
else {
if (searchResultsShown) {
searchResultsLayer.removeFrom(map);
}
}
}, 200);
};
}).on('search:collapsed', function () {
oldQuery = this._input.value;
});
ユーザー入力を保持するには、以下を削除する必要があります。
this.cancel();
差出人：
collapse: function() {
}
検索ボックスが崩壊しないcollapsedようにするには、次の例のようにオプションをfalseに追加します。
map.addControl( new L.Control.Search({
container: 'findbox',
layer: markersLayer,
initial: false,
collapsed: false
}) );
次に、[クリア]をクリックすると、折りたたみ機能が起動し、すべてが正常に機能するはずです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加