react.ts로 naver map api를 사용한 과정을 적는 글이다.
먼저 naver dev 홈페이지 로 들어가서 로그인을 한다(회원이 아니라면 회원가입 후 카드등록 정보까지 작성해주어야한다.)
naver tutorial로 들어가서 예제를 보면서 연습하여야한다.
1.먼저 위 코드와 같이 html파일에 script를 작성해야하고 가장 끝에 등록한 application의 client id를 넣어준다.
이제 모든준비는 끝났다.
2. 타입스크립트를 사용할것이기때문에 먼저 typescript버전을 설치해준다.
yarn add -D @types/navermaps
//App.tsx
const { naver } = window;
function App() {
const mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10,
};
const map = new naver.maps.Map("map", mapOptions);
return <div id='map' style={{ width: "100%", height: "500px" }} />;
}
export default App;
localhost:3000을 확인해보면 지도화면이 나왔을것이다.
function App() {
const [myLocation, setMyLocation] = useState<
{ latitude: number; longitude: number } | string
>("");
// get current position
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
setMyLocation({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
});
} else {
window.alert("현재위치를 알수 없습니다.");
}
}, []);
return <div id='map' style={{ width: "100%", height: "500px" }} />;
}
1.javascript의 navigator를 사용하여 내위치를 먼저 확인할수 있다.
2. 확인한 나의 경도와 위도를 useState안에 넣어준다.
const { naver } = window;
function App() {
const [myLocation, setMyLocation] = useState<
{ latitude: number; longitude: number } | string
>("");
// get current position
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
setMyLocation({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
});
} else {
window.alert("현재위치를 알수 없습니다.");
}
}, []);
useEffect(() => {
if (typeof myLocation !== "string") {
const currentPosition = [myLocation.latitude, myLocation.longitude];
const map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
zoomControl: true,
});
}
}, [myLocation]);
return <div id='map' style={{ width: "100%", height: "500px" }} />;
}
useEffect(() => {
if (typeof myLocation !== "string") {
const currentPosition = [myLocation.latitude, myLocation.longitude];
const map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
zoomControl: true,
});
const currentMarker = new naver.maps.Marker({
position: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
map,
icon: {
url: pinImage,
size: new naver.maps.Size(50, 52),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26),
},
});
}
}, [myLocation]);
기존 useEffect안에 currentMarker코드를 작성한다.(marker의 url에 새 이미지를 넣지 않으면 가장 기본 이미지로 나타난다.)
const otherLatLngs = [
{ lat: 37.6859, lng: 126.597865 },
{ lat: 37.68528, lng: 126.597227 },
{ lat: 37.685535, lng: 126.599528 },
{ lat: 37.684234, lng: 126.599292 },
];
useEffect(() => {
if (typeof myLocation !== "string") {
const currentPosition = [myLocation.latitude, myLocation.longitude];
const map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
zoomControl: true,
});
const currentMarker = new naver.maps.Marker({
position: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
map,
icon: {
url: pinImage,
size: new naver.maps.Size(50, 52),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26),
},
});
// 주변 마커 나타내기
for (let i = 0; i < otherLatLngs.length; i++) {
const otherMarkers = new naver.maps.Marker({
position: new naver.maps.LatLng(
otherLatLngs[i].lat,
otherLatLngs[i].lng
),
map,
});
}
}
}, [myLocation]);
주변 마커의 위도와경도가 있는 array만큼 반복문을 돌리고 그안에 marker문법을 넣어준다.
useEffect(() => {
if (typeof myLocation !== "string") {
const currentPosition = [myLocation.latitude, myLocation.longitude];
const map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
zoomControl: true,
});
const currentMarker = new naver.maps.Marker({
position: new naver.maps.LatLng(currentPosition[0], currentPosition[1]),
map,
icon: {
url: pinImage,
size: new naver.maps.Size(50, 52),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26),
},
});
// 주변 마커 나타내기
const markers: naver.maps.Marker[] = [];
const infowindows: naver.maps.InfoWindow[] = [];
const contentTags =
'<div class="naver-container"><p class="ptag">여깁니다</p><span class="spantag">맞아요</span></div>';
// show other markers
for (let i = 0; i < otherLatLngs.length; i += 1) {
const otherMarkers = new naver.maps.Marker({
position: new naver.maps.LatLng(
otherLatLngs[i].lat,
otherLatLngs[i].lng
),
map,
});
const infowindow = new naver.maps.InfoWindow({
content: contentTags,
borderWidth: 1,
anchorSize: new naver.maps.Size(10, 10),
pixelOffset: new naver.maps.Point(10, -10),
});
markers.push(otherMarkers);
infowindows.push(infowindow);
}
naver.maps.Event.addListener(map, "idle", () => {
updateMarkers(map, markers);
});
const updateMarkers = (
isMap: naver.maps.Map,
isMarkers: naver.maps.Marker[]
) => {
const mapBounds: any = isMap.getBounds();
let marker;
let position;
for (let i = 0; i < isMarkers.length; i += 1) {
marker = isMarkers[i];
position = marker.getPosition();
if (mapBounds.hasLatLng(position)) {
showMarker(isMap, marker);
} else {
hideMarker(marker);
}
}
};
const showMarker = (isMap: naver.maps.Map, marker: naver.maps.Marker) => {
marker.setMap(isMap);
};
const hideMarker = (marker: naver.maps.Marker) => {
marker.setMap(null);
};
const getClickHandler = (seq: number) => {
return () => {
const marker = markers[seq];
const infoWindow = infowindows[seq];
if (infoWindow.getMap()) {
infoWindow.close();
} else {
infoWindow.open(map, marker);
}
};
};
for (let i = 0; i < markers.length; i += 1) {
naver.maps.Event.addListener(markers[i], "click", getClickHandler(i));
}
}
}, [myLocation]);
안녕하세요~ 네이버 지도 구현하다가 중간에 막혀서 힘들었는데 덕분에 잘 구현했습니다. 감사합니다!