카카오맵이용 - 사용자 현재위치조회

카카오맵을 이용해서 사용자의 현재위치를 조회할수 있게 마커까지 표시되어 뜨게 구현했다.

단점이 있다면 크롬에서만 가능하다는 거다!

 

 

카카오에서 제공하는 문서이다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 10 // 지도의 확대 레벨 
    }; 

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
if (navigator.geolocation) {
    
    // GeoLocation을 이용해서 접속 위치를 얻어옵니다
    navigator.geolocation.getCurrentPosition(function(position) {
        
        var lat = position.coords.latitude, // 위도
            lon = position.coords.longitude; // 경도
        
        var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
        
        // 마커와 인포윈도우를 표시합니다
        displayMarker(locPosition, message);
            
      });
    
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
    
    var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
        message = 'geolocation을 사용할수 없어요..'
        
    displayMarker(locPosition, message);
}

// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({  
        map: map, 
        position: locPosition
    }); 
    
    var iwContent = message, // 인포윈도우에 표시할 내용
        iwRemoveable = true;

    // 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({
        content : iwContent,
        removable : iwRemoveable
    });
    
    // 인포윈도우를 마커위에 표시합니다 
    infowindow.open(map, marker);
    
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);      
}

https://apis.map.kakao.com/web/sample/geolocationMarker/

---

저걸 적용해서 내코드를 이런식으로 작성했다.

import React, { useEffect } from "react";
import { markerdata } from "./MarkerData";

declare global {
  interface Window {
    kakao: any;
  }
}

interface SearchProps {
  Place: string;
}
const MapComponent = ({ Place }: SearchProps) => {
  useEffect(() => {
    mapscript();
  }, [Place]);

  const mapscript = () => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(37.498085437935735, 127.02799122813362), //강남역
      level: 3,
    };

    const map = new window.kakao.maps.Map(container, options);

    //사용자 현재위치 정보
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const lat = position.coords.latitude,
          lon = position.coords.longitude;

        const locPosition = new window.kakao.maps.LatLng(lat, lon),
          message = "<div>현재위치</div>";

        // console.log(locPosition, message); // 이게 현재위치 잡히는거다 !!!!!!!!
        displayMarker(locPosition, message);
      });
    } else {
      const locPosition = new window.kakao.maps.LatLng(37.57022168346011, 126.98314742271637), //종각역
        message = "<div>아니야</div>";
      // console.log(locPosition, message);
      displayMarker(locPosition, message);
    }
    function displayMarker(locPosition: any, message: any) {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: locPosition,
      });
      const iwContent = message,
        iwRemoveable = true;

      const infowindow = new window.kakao.maps.InfoWindow({
        content: iwContent,
        removable: iwRemoveable,
      });
      infowindow.open(map, marker);
      map.setCenter(locPosition);
    }

    markerdata.forEach((el) => {
      //마커를 생성합니다.
      const marker = new window.kakao.maps.Marker({
        map: map, //마커가 표시될 지도
        position: new window.kakao.maps.LatLng(el.lat, el.lng), //마커가 표시될 위치
      });
      // 마커에 표시할 인포윈도우를 생성합니다
      const infowindow = new window.kakao.maps.InfoWindow({
        content: el.title, // 인포윈도우에 표시할 내용
      });

      window.kakao.maps.event.addListener(marker, "mouseover", makeOverListener(map, marker, infowindow));
      window.kakao.maps.event.addListener(marker, "mouseout", makeOutListener(infowindow));
    });
    // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
    function makeOverListener(map: any, marker: any, infowindow: any) {
      return function () {
        infowindow.open(map, marker);
      };
    }

    // 인포윈도우를 닫는 클로저를 만드는 함수입니다
    function makeOutListener(infowindow: any) {
      return function () {
        infowindow.close();
      };
    }
  };

  return <div id="map" style={{ width: "800px", height: "500px" }}></div>;
};

export default MapComponent;