모바일 및 Geolocation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Mobile tutorial - Leaflet</title> | |
| <meta charset="utf-8" /> | |
| <!-- 모바일 페이지 최적화 --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <style> | |
| html, body { height: 100%; margin: 0; padding: 0; } | |
| #map { width: 100%; height: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 화면에 보여질 맵 div 요소--> | |
| <div id='map'></div> | |
| <script> | |
| /** | |
| * 맵 초기화 | |
| * | |
| * fitWorld: 메소드를 이용해서 전세계를 포함하는 최대줌 레벨로 설정한다. | |
| */ | |
| var map = L.map('map').fitWorld(); | |
| /** | |
| * 맵에 타일 레이어 추가 | |
| */ | |
| L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox/streets-v11', | |
| tileSize: 512, | |
| zoomOffset: -1 | |
| }).addTo(map); | |
| /** | |
| * 사용자 위치 찾았을때 수행할 이벤트 등록 | |
| */ | |
| function onLocationFound(e) { | |
| var radius = e.accuracy / 2; | |
| L.marker(e.latlng).addTo(map) | |
| .bindPopup("You are within " + radius + " meters from this point").openPopup(); | |
| L.circle(e.latlng, radius).addTo(map); | |
| } | |
| map.on('locationfound', onLocationFound); | |
| /** | |
| * 사용자 위치 찾지 못했을 때 수행할 이벤트 등록 | |
| */ | |
| function onLocationError(e) { | |
| alert(e.message); | |
| } | |
| map.on('locationerror', onLocationError); | |
| /** | |
| * 사용자 위치 설정 | |
| * | |
| * locate 메소드 | |
| * - Geolocation API를 이용하여 사용자의 위치를 찾은 후 상황에 맞게 | |
| * locationfound / locationerror 이벤트를 수행한다. | |
| * - 크롬 브라우저에서 '현재위치 사용'을 허용하지 않으면 locationerror 이벤트 발생한다. | |
| * - 크롬 v50이상에서는 https를 사용하지 않으면 작동이 정상적으로 되지 않을 수 있다. | |
| * | |
| * Location Options | |
| * - setView (기본값 false): true 설정 시 사용자 위치를 찾으면 해당 위치로 설정, 실패 시 World(전세계) 표시 | |
| * - maxZoom (기본값 Infinity): setView가 사용될 시 사용될 줌레벨 | |
| */ | |
| map.locate({setView: true, maxZoom: 16}); | |
| </script> | |
| </body> | |
| </html> |
참고: https://leafletjs.com/examples/mobile/
댓글
댓글 쓰기