Leaflet.jsでマップセンターを変更する方法

111

次のコードは、リーフレットマップを初期化します。初期化機能は、ユーザーの位置に基づいてマップを中央に配置します。初期化関数を呼び出した後、マップの中心を新しい位置に変更するにはどうすればよいですか？

function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Â© <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

map.locate({setView: true, maxZoom: 8});    
}

javascript leaflet

— ジョエル・ジェームス
ソース

169

例えば：

map.panTo(new L.LatLng(40.737, -73.923));

— パウロロドリゲス
ソース

23

map.flyTo([40.737, -73.923], 8) 同様にズームしてアニメーション化したい場合

— Martin Belcher-AtWrk

4

私の場合はしかし、panTo()、flyTo()、setView()-それらのすべてが私を取る左上のマップではなく、中心の。

— Mrigank Pawagi

あなた...あなたたちは私たちの日を救います

— ムニーブ・ミルザ

128

次のものも使用できます。

map.setView(new L.LatLng(40.737, -73.923), 8);

それはあなたが望む行動に依存します。map.panTo()ズーム/パンアニメーションでその場所にパンし、同時にmap.setView()新しいビューを目的の場所/ズームレベルに設定します。

— グレッグ・ウィルソン
ソース

4

ズームレベルも表示されるので、これは非常に便利です。

— Concolato氏、2014年

2

また、配列として座標を渡すこともできます：map.setView([40.737, -73.923], 8)またはオブジェクトmap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

panToはアニメーションを表示していませんでした、私は使用しますmap.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

map.panTo();ポイントが現在のビューにある場合、Use は何もしません。map.setView()代わりに使用してください。

私はポリラインを持っていて、毎秒ポリラインの新しいポイントにマップを中央配置しなければなりませんでした。コードを確認してください：良い：https : //jsfiddle.net/nstudor/xcmdwfjk/

mymap.setView(point, 11, { animation: true });

悪い：https : //jsfiddle.net/nstudor/Lgahv905/

mymap.panTo(point);
mymap.setZoom(11);

— ステファン・ネデルク
ソース

4

あなたも使うことができます：

var latLon = L.latLng(40.737, -73.923);
var bounds = latLon.toBounds(500); // 500 = metres
map.panTo(latLon).fitBounds(bounds);

これにより、マップリーフレットの境界に合うようにビューレベルが設定されます。

— ラテン人力車
ソース