web-dev-qa-db-ja.com

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

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

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});    
}
javascriptleaflet
89
Joel James

例えば：

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

以下も使用できます。

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

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

105
Greg Wilson

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

ポリラインがあり、毎秒ポリマップの新しいポイントにマップを中央に配置する必要がありました。コードを確認してください：GOOD： https://jsfiddle.net/nstudor/xcmdwfjk/

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

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

mymap.panTo(point);
mymap.setZoom(11);
6
Stefan Nedelcu

以下も使用できます。

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

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

1
Latinrickshaw