1 분 소요

geolocation을 이용하여 위치값을 가져오겠습니다.

  • Geolocation API는 navigator.geolocation 객체를 통해 사용할 수 있습니다. 그리고 getCurrentPosition() 를 이용해서 현재 위치를 가져올수 있습니다. 두가지 콜백 함수를 받습니다. 값을 받아오는 첫 번째 콜백과 오류를 호출하는 두 번째 콜백함수가있습니다.

  • 아래의 예제에서 첫 번째 콜백에서 position 매개변수를 받아왔습니다. console.log(position) 해보면 받아오는 값을 확인할수 있습니다. 저는 latitude와 longitude 값이 필요해서 바로 받아왔습니다.

navigator.geolocation.getCurrentPosition(
  //첫 번째는 값을 받아오는 콜백입니다.
  (position) => {
    const { latitude } = position.coords;
    const { longitude } = position.coords;
  },

  //두 번째는 오류를 출력하는 콜백입니다.
  () => {
    alert("could not get your position");
  }
);

  • 간단하게 현재 위치값을 잘 가져오는지 확인해보겠습니다. 구글맵에 접속하여 위치를 클릭하면 https://www.google.com/maps/@37.4794299,126.9563392,14z 이라는 좌표가 나옵니다.뒷부분의 숫자는 클릭하는 위치마다 값이 다릅니다.

    아래의 예제 처럼 검색하시고 클릭하면 구글맵에서 현재 위치로 이동하게됩니다.

console.log(`https://www.google.com/maps/@${latitude},${longitude}`)

leaflet 라이브러리를 사용해서 구현하겠습니다.

  • 리플릿(Leaflet)은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리입니다.

  • 다운로드 링크입니다. 저는 CDN을 이용했습니다. scirip에 defer을 이용했습니다. 이유는 위치정보와 leaflet을 이용하여 어플을 만들때에는 스크립트 다운로드되는 순서가 매우 중요해집니다.

    defer를 사용하기 좋은 예제라고 생각합니다.

        <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      defer
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>

    기본 설정

  • 먼저 var를 const로 바꿔줍니다.
  • map 함수에는 HTML의 body에 “map” id를 가진 요소가 필요합니다. HTML에서 map이 그려질 부분에 div코드를 적어줍니다. <div id="map"><div>
       const map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 				contributors',
      }).addTo(map);

      L.marker([51.5, -0.09])
        .addTo(map)
        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
        .openPopup();
    },
  • setView와 marker에서 원하는값이 배열이기때문에 latitude와 longitude를 배열고 묶어주겠습니다. 묶어준 값을 넣어 주고 지도를 확인해보면 지금 위치에 marker가 표시되는걸 확인할수 있습니다.

setView의 13은 확대/축소 값입니다.

const coords = [latitude, longitude];

const map = L.map("map").setView(coords, 13);

L.marker(coords);

  • tileLayer은 기본적으로 작은 타일로 구성되어 있습니다. 기본적으로 오픈 스트리트 맵에서 가져온 것입니다.

    타일의 정보는 검색해보시는걸 추천드립니다. 타일을 바꾸는 방법과 종류는 더 자세하게 다뤄보겠습니다. 아래는 제가 사용한 타일입니다.

    ` https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png,`

click 이벤트를 이용하여 popup을 구현해보겠습니다.

참고 링크입니다.

  • leaflet 에서는 addeventlistener 대신해서 on 메소드를 사용합니다.
  • marker메소드를 on 메소드에 넣어서 “click”이벤트가 발생하면 popup이 뜨게 만들어줍니다.
  • bindPopup 메소드에 L.popup을 이용하여 옵션을 전달할수 있습니다.
  • 옵션들은 링크를 참고 해서 커스텀 해주시면됩니다. className 옵션은 미리 만들어 두었던 css에서 class를 가져와서 사용하였습니다.
  • setPopupContent를 이용해 text를 넣어주었습니다.
   map.on('click', mapEvent => {
        // console.log(mapEvent);
        const { lat, lng } = mapEvent.latlng;

        L.marker({ lat, lng })
          .addTo(map)
          .bindPopup(
            L.popup({
              minWidth: 250,
              minWidth: 100,
              autoClose: false,
              closeOnClick: false,
              className: 'runnung-popup',
            })
          )
          .setPopupContent('workout')
          .openPopup();
      });


//.running-popup {
  border-left: 5px solid var #00c46a;
}

댓글남기기

참고

최대 1 분 소요