안녕하세요.
위도 경도에 따라 마커를 표시 하고 있는데요. 유독 여의도 국회 내 지역을 선택하여도 마커가 찍히지 않습니다.
국가 중요 건물에는 마커를 표시 할수 없는건가요?
국가 중요건물로써 보안적으로 중요한 건물은, 지도판에서 삭제가 됩니다.
개인이 임의로 개발하는 서비스에서, 코드레벨로 마커가 찍히지 않게 하거나 하는 제약조건은 없습니다.
아무튼 현재 어떠한 방식으로 이용을 하시는지 몰라 답변이 어렵습니다.
안찍힌다는 서비스를 저희가 볼 수 있는 방법이 있을까요?
아니면 개발자도구를 열어서 혹시 오류가 뜨고있는지 콘솔쪽을 참고해서 디버깅을 해보시기 바랍니다.
https://www.ohmynews.com/NWS_Web/ArticlePage/Map/index_elect2024.aspx
지도 서비스 입니다. 여의도 국회 지역 위도 경도를 수집해서 마커오 오버레이를 보여주는데.
유독 국회 쪽은 마커가 표시가 안되고 있습니다.
앞서 안내드린 대로 받아온 위치 정보가 올바르면 지도에 마커, 오버레이 표시는 정상 표시됩니다.
사이트에서 국회의사당역 근처에 마커가 표시되고 있는데요.
안 보이는 데이터 정보를 알 수 없어 어떤 부분이 왜 안 나오는지 확인이 불가합니다.
표시할 데이터가 올바른지 확인해 주시고 데이터 정보도 함께 첨부 부탁드립니다.
국회의사당 국회소통관|37.528378557855|126.915225677058|
국회의사당|37.528378557855|126.915225677058|
이런 위치 입니다. 국회 내 여러 장소가 안되어 할 수 없이 국회의사당역 근처로 잡아 놓았습니다.
국회의사당 정문 앞 길 건너는 잡히는데 국회의사당 정문 안쪽으로는 표시가 안되고 있습니다.
두 장소의 좌표가 동일한 위치에 있는데요. 페이지에서 설정한 위치로 마커가 표시되고 있습니다.
표시할 데이터의 좌표가 해당 위치가 아니라면 데이터를 변경해서 확인해 주세요.
아래는 “국회의사당” 키워드로 검색한 결과를 지도에 표시한 예제입니다.
결과로 받은 15건의 데이터 모두 지도에 정상 표시되고 있습니다.
좌표값만 올바르면 지도에 모두 표시가 되기 때문에 설정한 데이터가 올바른지 다시 한번 확인 부탁드립니다.
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.53190827313679, 126.91416237338858), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
const positions = [
{ lat: 37.53190827313679, lng: 126.91416237338858 },
{ lat: 37.5281465047706, lng: 126.91783895106 },
{ lat: 37.529470279371, lng: 126.91432129227 },
{ lat: 37.531852297174, lng: 126.919106553541 },
{ lat: 37.53046059033474, lng: 126.91323858353782 },
{ lat: 37.5294810716771, lng: 126.914294127745 },
{ lat: 37.53140255950643, lng: 126.91259034886991 },
{ lat: 37.5329611724259, lng: 126.912430134814 },
{ lat: 37.5331104583031, lng: 126.91576078904762 },
{ lat: 37.5317109607448, lng: 126.917975331649 },
{ lat: 37.528269859433905, lng: 126.9164371071192 },
{ lat: 37.5294434209085, lng: 126.917086318606 },
{ lat: 37.531207641894056, lng: 126.91717261231925 },
{ lat: 37.5295266967335, lng: 126.91261969011 },
{ lat: 37.5334203073867, lng: 126.914375606534 }
]
positions.forEach(pos => {
const marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(pos.lat, pos.lng),
map: map
});
});
</script>
</body>
테스트 해보니 ’ 키워드로 장소검색하고 목록으로 표출하기’ 이용하여 위도, 경도, 주소를 가져오고 있는데.
국회 내의 목을 들을 클릭해도 위도, 경도 같이 똑같이 들어 오고 있네요.
@ekaram
샘플로 확인하여도 국회 내 여러 장소가 정상적으로 표출됩니다.
사용하신 데이터와 코드를 다시 한번 확인해주세요.
그리고,
개발하신 페이지를 확인해보았는데
지도 상 필수로 표시되어야 할 당사의 CI 가 표시되지 않습니다.
지도 하단에 표시되는 당사의 CI는 상시 표시되어야 하므로 가려지지 않도록 빠른 수정 요청 드립니다.
위 답변대로 해당 예제에서 마커를 마우스 오버하면 위치에 맞게 오버레이가 표시되고 있습니다.
목록을 클릭해도 동일한 정보가 들어오는 경우
반복문에서 클로저 함수 또는 es6 문법(let, const)을 사용하지 않고
이벤트를 등록하면 스코프 유지가 되지 않아 가장 마지막 I번째 장소 정보만 활용됩니다.
직접 해보기 버튼을 눌러서 displayPalces 함수에 이벤트를 등록하는 클로저 함수를 주석 처리하고
아래와 같이 mouseover 이벤트를 등록하면 모든 마커가 동일한 위치로 출력되는 것을 확인할 수 있습니다.
for문에서 이런 형태로 이벤트를 등록하고 있다면 스코프 유지를 위해 클로저 함수를 사용하거나
for문 대신 forEach 또는 for문 내에서 let, const를 사용하는 방법으로 변경해 주세요.
function displayPlaces(places) {
//...
for ( var i=0; i<places.length; i++ ) {
//...
//todo: mouseover 이벤트를 아래와 같이 등록하고 콘솔에 출력된 값을 확인하면
//지도에 표시된 모든 마커가 가장 마지막 장소 정보 좌표로 출력됩니다.
kakao.maps.event.addListener(marker, 'mouseover', function() {
console.log(placePosition, i);
})
}
}
나오도록 수정햇는데…
CI 를 중앙으로 표시하는 방법은 없을까요? 지도 위에 Layer를 올려서 가려진건데… 약간모양이 어긋나네요.
copyright 위치는 왼쪽 아래, 오른쪽 아래만 설정 가능합니다.
https://apis.map.kakao.com/web/documentation/#CopyrightPosition
https://apis.map.kakao.com/web/documentation/#Map_setCopyrightPosition