leaflet - 원하는 위치로 이동하기

매우매우 간단한 위치 이동하는 기능이다.

추후 즐겨찾기 기능 등에 활용되지 않을까 싶다.

 

https://leafletjs.com/reference.html#LatLng

Documentation - Leaflet - a JavaScript library for interactive maps

이동하기 panTo() 사용 예시

​

leaflet css, script 추가

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

 

지도 생성

var NH = "";
var NHLat = 37.56249213;
var NHLng = 126.96849315;

var seoulstation = "";
var seoulstationLat = 37.55236577;
var seoulstationLng = 126.97077348;


//지도 생성
var map = L.map("map").setView([ NHLat, NHLng ], 18);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',
				{
					maxZoom : 19,
					attribution : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			}).addTo(map);

 

이동하기 기능 추가

//서울역 이동
function move() {
	map.panTo(new L.LatLng(seoulstationLat, seoulstationLng));
}

 

 

 

해당 기능을 통해 본인이 설정한 좌표값에 따라 위치가 이동되는 것을 확인하였다.