var marker = new daum.maps.Marker({
position: map.getCenter()
});
marker.setMap(map);
daum.maps.event.addListener(map, 'click', function(mouseEvent) {
var latlng = mouseEvent.latLng;
marker.setPosition(latlng);
_**var message = '냥이가 있는 곳의 위도는 ' + latlng.getLat() + ' 이고, ';**_
_** message += '경도는 ' + latlng.getLng() + ' 입니다';**_
var resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
})
위 코드에서 위도와 경도로 주소를 얻어 위도와 경도 대신 주소를 출력할 수는 없을까요? (표시된 부분처럼)
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.3614483, 127.1114883), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var marker = new daum.maps.Marker({
position: map.getCenter()
});
marker.setMap(map);
daum.maps.event.addListener(map, ‘click’, function(mouseEvent) {
var latlng = mouseEvent.latLng;
marker.setPosition(latlng);
var resultDiv = document.getElementById('clickLatlng');
var geocoder = new daum.maps.services.Geocoder();
var coord = new daum.maps.LatLng(latlng.getLat(), latlng.getLng());
var callback = function(result, status) {
if (status === daum.maps.services.Status.OK) {
message=console.log('그런 너를 마주칠까 ' + result[0].address.address_name + '을 못가');
}
};
geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
resultDiv.innerHTML = message;
라이브러리 참고하여 이렇게 코드를 수정하였는데 지도 자체가 뜨지 않습니다. 왜일까요?
수정 전 코드에서 지도가 떴었다면
지도 엘리먼트의 id값이 map인지 다시 확인해주세요.
id 값은 map입니다. 아래 코드가 맞나요?
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.3614483, 127.1114883), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
그리고 수정 전 코드에서 떴었는데 갑자기 뜨지 않습니다. (수정 전 코드로 돌렸을 경우)
일단 첨부해주신 코드가 온전하지 않습니다.
위 코드를 그대로 사용하셨다면 문법오류 때문에 안나오는게 맞고요.
예제에는 click 이벤트 내부에서 geocoder를 생성하고 있지 않습니다.
이벤트 핸들러 밖에서 한 번만 만들어 주고
클릭 이벤트 내부에서 생성된 geocoder를 계속 재사용하고 있어요.
이 부분도 수정하셔야 될 것 같습니다.
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.3614483, 127.1114883), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
/////////////////////////////////////////////////////////////////////////////
//이전 고양이들
var imageSrc = "http://localhost:8080/CatLover/img/한국 지도.gif", // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)};
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption);
var position1 = new daum.maps.LatLng(37.3614483, 127.1114883);
var marker1 = new daum.maps.Marker({
position: position1,
image: markerImage,
clickable: true
});
marker1.setMap(map);
var iwContent = '
Hello World!
',
iwRemoveable = true;
var infowindow = new daum.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
daum.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map, marker1);
});
/////////////////////////////////////////////////////////////////////////////
//새로운 고양이
var marker = new daum.maps.Marker({
position: map.getCenter()
});
marker.setMap(map);
daum.maps.event.addListener(map, 'click', function(mouseEvent) {
var latlng = mouseEvent.latLng;
marker.setPosition(latlng);
var message = '냥이가 있는 곳의 위도는 ' + latlng.getLat() + ' 이고, ';
message += '경도는 ' + latlng.getLng() + ' 입니다';
var resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
});
이게 수정 전 코드입니다. 이 코드는 잘 떴었는데 왜 갑자기 뜨지 않는 걸까요? 문제는 다른 pc에서는 뜨고 제 pc에서만 뜨지 않습니다. 서버, 와이파이 등 환경 등은 모두 똑같구요. 답변 정말 감사드립니다. ㅠㅠ
추가로 제 코드가 아닌 예제 샘플 코드도 지도가 뜨지 않고 있습니다. ㅠㅠ
다른 컴퓨터에서 뜨는거면…
그냥 환경문제 같습니다.
브라우저 플러그인을 추가로 설치하신게 있다거나
ad blocker가 스크립트를 블락하는 경우도 생각해볼 수 있고요.
도메인등록을 안한 주소로 접근해서 안나올 수 있습니다. (ex. localhost)
근데 아무리 증상을 써주셔도
개발자 도구에 뜨는 에러메세지를 첨부해 주시는것 보다 못합니다.
코드를 봐도 이상이 없다면 계속 추측밖에 못하니까요.
