카카오맵 마커 이동

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

안녕하세요 특정이벤트시 마커 이미지 모양이 기본으로 바뀌는 있어 문의 드립니다.

1. 특정 폼을 클릭하면 발생합니다. 뭐대충 커스텀마커에 이미지와 드래그 이미지 올라간것입니다.
그리고 window.state.startMarker 에 마커를 담았습니다.

map = window.state.map;
var centerposition = map.getCenter();
var lat = centerposition.getLat(), // 위도
lon = centerposition.getLng(); // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = ‘

여기에 계신가요?!
’; // 인포윈도우에 표시될 내용입니다
if(window.state.waySearch == true){
var startSrc = ‘https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_b.png’, // 출발 마커이미지의 주소입니다
startSize = new kakao.maps.Size(50, 45), // 출발 마커이미지의 크기입니다
startOption = {
offset: new kakao.maps.Point(15, 43) // 출발 마커이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};

// 출발 마커 이미지를 생성합니다
var startImage = new kakao.maps.MarkerImage(startSrc, startSize, startOption);
window.state.startImage = startImage;

var startDragSrc = ‘https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png’, // 출발 마커의 드래그 이미지 주소입니다
startDragSize = new kakao.maps.Size(50, 64), // 출발 마커의 드래그 이미지 크기입니다
startDragOption = {
offset: new kakao.maps.Point(15, 54) // 출발 마커의 드래그 이미지에서 마커의 좌표에 일치시킬 좌표를 설정합니다 (기본값은 이미지의 가운데 아래입니다)
};

// 출발 마커의 드래그 이미지를 생성합니다
var startDragImage = new kakao.maps.MarkerImage(startDragSrc, startDragSize, startDragOption);

// 출발 마커가 표시될 위치입니다
var startPosition = new kakao.maps.LatLng(lat , lon - 0.01);
console.log(“startPosition”, startPosition);
// 출발 마커를 생성합니다
var startMarker = new kakao.maps.Marker({
map: map, // 출발 마커가 지도 위에 표시되도록 설정합니다
position: startPosition,
draggable: true, // 출발 마커가 드래그 가능하도록 설정합니다
image: startImage, // 출발 마커이미지를 설정합니다
zIndex: 9999
});

window.state.startMarker = startMarker;
startMarker.setmap(map);

2. 다른부분에서 이벤트가 있을때 좌표를 새로 받아서
var moveLatLon = new kakao.maps.LatLng(lat + ‘,’ + lng);
window.state.startMarker.setPosition(moveLatLon);

마커를 이동해 주었습니다 이때 옵션이랑 이미지 드래그 모든게 포함되지 않고
기본이미지로 마커가 이동되는데 이유를 알 수 있을까요?

2

첨부 코드를 참고해서 startMarker 위치를 변경해보았는데요.
생성한 마커 정보가 유지된 상태에서 위치 변경이 됩니다.
코드 내 다른 부분에서 startMarker값을 재설정하는 부분이 있는지 확인 부탁드립니다.

3

표시된 마커안에 분명 이미지가 들어가있는데 베이직 마커가 올라오네요
startMarker 재사용된 곳은 없습니다. ㅜㅜ

Rc 부분에 x y가 naN 인거 빼곤 원래랑 동일한데 상관없는건가요?

image
image814×465 17.2 KB

4

이미지가 적용된 마커를 표출한 다음 state에 담아서 활용하는 로직으로 확장시켜 주셔야 할 것 같아요.

캡처로 추측해 보면 좌표값이 NaN으로 적용된 것 같은데
startMarker.getPosition()으로 마커 좌표가 올바르게 설정되어 있는지 확인해주시고
앞서 말씀드린대로 이미지가 적용된 마커를 지도에 표시한 다음 이후 동작을 확인해주세요.

5

안녕하세요

좌표가 없는데 어떻게 이동이 되고 마커가 올라오는지 모르겠네요

https://ode.kr/anb/test_ruoter.php 에 테스트 페이지 만들어 보았습니다.

왼쪽 상단에 출발점을 클릭하면 지도에 출발과 이동 마커가 나옵니다.
드래그 해서 이동시키면 잘 됩니다.

다만 출발에 강남역 이라고 검색하면 나오는 ul 리스트에 강남역을 클릭하면
지도가 이동이 되는데 속성이 모두 사라지네요 드래그속성도 마커 기본 이미지도요

왜이럴까요?

6

제가 코드를 대신 디버깅을 해드리진 않습니다.
그리고 링크를 들어가면 검색 ui와 출발지 설정 메뉴가 보이지 않아서 확인이 안 되는데요.

링크에서 확인해 볼 수 없어서 주신 내용으로 보면, 검색 이후 리스트를 클릭할 때 로직이 구현한 대로 동작하지 않는 것 같습니다.
리스트 클릭 이벤트에서 마커를 지도에 표시할 때, 어떤 마커 객체로 지도에 표시하고 있는지
디버깅으로 마커와 설정하는 좌표값등을 확인해 주세요.

7

정말 미안합니다.

검색부분을 관리자만 나오게 해뒀었네요

괜찮으시면 한번만 더 봐주시면 안될까요? ㅠㅠ

https://ode.kr/anb/test_ruoter.php

원래 여러가지 다양한 기능이있는데

간단하게 검색부분과 출발 도착 표시만 나오게 해 두었거든요

8

제가 이전에 답변드린 내용을 확인 안 하신 것 같네요.
MoveStartMarker, MoveEndMarker 함수에서 이동할 좌표로 LatLng객체를 생성할 때
아래와 같이 생성하면 좌표값이 올바르지 않아서 NaN, NaN로 값으로 설정되며 장소 위치에 표시되지 않습니다.
그리고 기본 마커는 setCenter(x, y) 함수를 실행하면서 생긴 마커입니다.
개발을 하면서 생긴 이슈는 디버깅을 통해 좀 더 빨리 해결 할 수 있습니다.
답변 참고하셔서 확인해주세요.

var moveLatLon1 = new kakao.maps.LatLng(lat + ',' + lng); (X)
var moveLatLon2 = new kakao.maps.LatLng(lat + ',' + lng); (X)

var moveLatLon1 = new kakao.maps.LatLng(lat, lng); (O)
var moveLatLon2 = new kakao.maps.LatLng(lat, lng); (O)

https://apis.map.kakao.com/web/documentation/#LatLng

9

아 정말 감사드려요

소스가 길어서 변수 넘기는 형식이 틀린곳이 있었군요

덕분에 해결됐어요 ^^;

새해복 많이 받으세요

1개의 좋아요