※このライブラリは以下の環境で動作しています。
フレームワーク：cordova,react
パッケージ管理：npm
leafletのプラグインの一つ「leaflet-control-geocoder」を使うと、住所から場所を探すことができます。
実装方法は以下の通り
npm i leaflet-control-geocoderコマンドでライブラリを入手
index.htmlのheadタグ内に以下のlinkタグとscriptタグを配置します。
<pre class="wp-block-syntaxhighlighter-code"><link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<a href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js">https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js</a></pre>
必要最低限の実装の場合は以下の形になります。
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.Control.geocoder().addTo(map);
実装後の画面を見てみると、右上に虫眼鏡のマークをしたフォームが出ているかと思いますが
これをタップすると下記の画像のようにフォームがにゅっと横に伸びて住所を入力できるように
なります。
番地まで細かい住所は検索できませんが、町名までなら難なく探すことができます。
また、入力時の情報も以下のコールバックで取得することができます。
.on('markgeocode', function(e) {
var bbox = e.geocode.bbox;
var poly = L.polygon([
bbox.getSouthEast(),
bbox.getNorthEast(),
bbox.getNorthWest(),
bbox.getSouthWest()
]).addTo(map);
map.fitBounds(poly.getBounds());
})
