Leaflet.js에서지도 중심을 변경하는 방법

111

다음 코드는 전단지 맵을 초기화합니다. initialize 함수는 사용자 위치를 기반으로지도를 중앙에 배치합니다. initialize 함수를 호출 한 후지도의 중심을 새 위치로 변경하려면 어떻게해야합니까?

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

나는 당신이 또한 매우 유용한 줌 레벨을 얻었 기 때문에 이것을 좋아합니다.

— Mr. Concolato 2014-10-16

2

또한 좌표를 배열로 전달할 수 있습니다. map.setView([40.737, -73.923], 8)또는 객체map.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

동화 연극 애니메이션 표시되지 않는 한, 내가 사용map.setView(latlng, map.getZoom(), { animation: true });

— 이반 페레 빌라

7

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);

— 스테판 네 델쿠
소스

4

다음을 사용할 수도 있습니다.

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

이렇게하면지도 전단지의 경계에 맞게보기 수준이 설정됩니다.

— 라틴 인력거
소스