응용 프로그램에 이동이 편리한 상호작용 지도를 추가하는 것이 가장 간단한 방법이다🗺️

간편한 대화형 맵 이동을 위한 소스 JavaScript 라이브러리
이 단계별 가이드는 전단 지도 설정, 표지 사용, 다단선 및 팝업 창, 사건 처리 등 전단지의 기초 지식을 신속하게 이해할 수 있도록 도와줍니다.

페이지 준비

지도에 대한 코드를 작성하기 전에 페이지에서 다음 준비 단계를 수행해야 합니다.
문서의 시작 부분에 전단 CSS 파일을 포함합니다.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="    crossorigin=""/>

전단 CSS 뒤에 전단 자바스크립트 파일을 포함합니다.

<!-- Make sure you put this AFTER Leaflet's CSS --> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

맵이 있는 위치에 특정 id를 가진div 요소를 배치합니다.

<div id="mapid"></div>

맵 컨테이너가 CSS에서 설정하여 정의된 높이를 가지도록 합니다.

#mapid { height: 180px; }

현재, 당신은 지도를 초기화하고 그것을 조작할 준비가 되어 있습니다.

지도 설정

런던 시내 중심의 지도를 멋진 지도 상자와 거리 타일로 그려 봅시다.우선, 지도를 초기화하고 그 보기를 우리가 선택한 지리 좌표와 축소 단계로 설정합니다.

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

기본적으로 (맵을 만들 때 어떤 옵션도 전달하지 않았기 때문에) 맵의 모든 마우스와 터치 상호작용이 활성화되고, 축소와 속성 제어가 있습니다.
setView 호출도 맵의 대상을 되돌려줍니다. 대부분의 전단 방법은 현식 값을 되돌려주지 않을 때 이렇게 합니다. 이렇게 하면 jQuery와 같은 방법 링크를 쉽게 할 수 있습니다.
다음은 맵에 추가할 평평한 층을 추가합니다. 이 예에서는 Mapbox Streets 평평한 층을 추가합니다.일반적으로 배열 레이어를 작성하려면 배열 이미지 설정URL template, 속성 텍스트 및 레이어의 최대 축척 레벨이 필요합니다.이 예에서 우리는 Mapbox’s Static Tiles API의 맵박스/streets-v11 타일을 사용할 것이다(맵박스의 타일을 사용하기 위해서는 반드시 사용해야 한다request an access token.이 API는 기본적으로 256x256이 아닌 512x512 배열로 반환되므로 이 점을 명시적으로 지정하고 오프셋 -1의 배율을 조정해야 합니다.

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

div와 전단지 다음에 모든 코드를 호출해야 합니다.js 포용.이렇게!너는 지금 유효한 전단지 지도를 한 장 가지고 있다.
주의해야 할 것은 전단지는 공급업체에 대해 알 수 없으며, 이는 타일 공급업체의 특정한 선택을 강제로 집행하지 않는다는 것을 의미한다.맵박스/satellite-v9로 맵박스/streets-v11을 교체해 보세요. 무슨 일이 일어날지 보세요.또한 전단지에는 공급자에 대한 코드가 한 줄도 포함되어 있지 않기 때문에 필요하면 다른 공급자를 자유롭게 사용할 수 있습니다. (Mapbox를 사용하는 것을 권장하지만, 이것은 보기에 매우 아름답습니다.)
OpenStreetMap 기반의 모든 콘텐츠를 사용할 때 copyright notice 의 요구에 따라 귀인을 해야 한다.대부분의 다른 스티커 공급자(예를 들어 Mapbox, Stamen 또는 Thunderforest도 귀속되어야 한다.꼭 외상할 데서 외상해야 돼.

책 수령: Javascript challenges

마커, 원 및 다각형

타일링 레이어 외에도 맵에 태그, 폴리선, 다각형, 원, 팝업 창 등 다른 내용을 쉽게 추가할 수 있습니다.태그를 추가합니다.

var marker = L.marker([51.5, -0.09]).addTo(mymap);

원을 추가하는 것은 동일한 경우(반지름 미터를 두 번째 매개변수로 지정하는 경우를 제외하고) 객체를 작성할 때 전송 옵션을 마지막 매개변수로 사용하여 원의 모양을 제어할 수 있습니다.

var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);

다각형을 추가하는 것은 매우 간단합니다.

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

팝업 창 사용

지도의 특정 대상에 특정한 정보를 추가하려면 팝업 창을 사용합니다.전단지에는 매우 편리한 단축키가 있다.

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

우리 아이템을 클릭해 보세요.bindPopup 방법은 지정한 HTML 내용이 있는 팝업 창을 태그에 추가합니다. 대상을 눌렀을 때 팝업 창이 나타나고 OpenPopup 방법 (태그에만 적용) 은 추가 팝업 창을 즉시 열 수 있습니다.
또한 팝업 창을 레이어로 사용할 수도 있습니다(객체에 팝업 창을 첨부하는 것만이 아닌 경우).

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

이 곳에서, 우리는addTo가 아닌openOn을 사용합니다. 새 팝업 창을 열 때 이전에 열린 팝업 창을 자동으로 닫을 수 있기 때문에 가용성에 좋습니다.

이벤트 처리

전단지에서 사용자가 태그를 누르거나 지도를 축소해서 변경할 때마다 해당하는 대상이 이벤트를 보냅니다. 함수를 사용하여 이벤트를 구독할 수 있습니다.사용자 상호 작용에 반응할 수 있습니다.

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

mymap.on('click', onMapClick);

각 객체에는 고유한 이벤트 세트가 있습니다. 자세한 내용은 을 참조하십시오documentation.listener 함수의 첫 번째 인자는 이벤트 대상입니다. 이벤트에 대한 유용한 정보를 포함합니다.예를 들어 맵 클릭 이벤트 대상(위의 e)은latlng 속성을 가지고 있으며 이 속성은 클릭이 발생하는 위치입니다.
경고 대신 팝업 창을 사용하여 예제를 개선합니다.

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

Javascript의 추가 리소스를 배우려면 다음과 같이 하십시오.
The Complete JavaScript Course 2021: From Zero to Expert
Google Maps JavaScript API — Complete Training