2013-07-26 1 views
3

여기 마커 위치를 기준으로 위도와 경도 값을 경고하고 싶습니다. 나는 그것을하는 방법을 얻지 못하고있다.마커 클릭 이벤트에 위도와 경도 표시

방금 ​​Google지도 API를 배우기 시작했습니다. 제발 도와주세요.

이 코드에서 내 마커는 다른 위치로 올바르게 이동하지만 위도 및 경도 값을 표시하지 않습니다.

<html> 
<head> 
<base href="<%=basePath%>"> 
    <style type="text/css"> 
     #map_canvas { 
     height: 430px; 
     width: 980px; 
     position: static; 
     top: 100px; 
     left: 200px; 
    } 
</style> 

<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 

<script type="text/javascript"> 
var marker; 

function initialize() { 
    var latlng = new google.maps.LatLng(18.9647, 72.8258); 

    var myOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     streetViewControl: false, 
     mapTypeControl: false 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 


     google.maps.event.addListener(map, 'click', function(event) { 
     placeMarker(event.latLng); 
    }); 

    function placeMarker(location) { 
     if (marker == undefined){ 
      marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
       animation: google.maps.Animation.DROP 
      }); 
     } 
     else{ 
      marker.setPosition(location); 
     } 
     map.setCenter(location); 

     google.maps.event.addListener(marker, "click", function (event) { 
       alert(this.position); 
     }); 
     } 

     }    

    </script> 
     </head> 


    <body onload="initialize()"> 
     <div id="map_canvas" style="1500px; 1000px"></div> 
     </body> 
     </html> 
+0

파이어 폭스를 사용하면 코드가 정상적으로 작동합니다. 처음 클릭 할 때 마커가 나타납니다. 마커를 클릭하면 위치가 알려졌습니다. 이것이 바로 코드에서 예상대로 동작하는 것입니다. 당신이 다른 것을 원한다면 - 당신이 찾고있는 행동을 설명하십시오. 현재 형태로 http://www.floris.us/SO/mapPin.html에서 작동합니다 - 복사 및 붙여 넣기 만하면됩니다. 파이어 폭스 21.0 – Floris

+0

파이어 폭스 22에 대해 미안 해요. 그게 나타나지 않아요. – shanky

+0

파이어 버그를 실행하고 무슨 일이 벌어지고 있는지보실 수 있습니까? 나는 이벤트를 위해 마커를 클릭해야했다. 또한 - 다른 곳을 클릭하여 마커를 이동 한 다음 다시 클릭하면 두 개의 알림이 표시됩니다. 다음에 3을 얻습니다. 명확히 옳지 않은 무언가. 'placeMarker' 자체가 동작해야하는 이벤트 핸들러이기 때문에 이벤트 핸들러가없는'map.setCenter (location)'바로 다음에 경고하지 않는 것이 좋습니다. 데모는 http://www.floris.us/SO/mapPin2.html을 참조하십시오 (마커를 클릭 할 때가 아니라 위치를 변경할 때의 경고 만). – Floris

답변

2

당신은 이벤트를 표시하는 별도의 이벤트를 만들지 않으 - 다음, 그것 생성 코드 (또는 이동) 마커의 일부합니다

function placeMarker(location) { 
    if (marker == undefined){ 
     marker = new google.maps.Marker({ 
      position: location, 
      map: map, 
      animation: google.maps.Animation.DROP 
     }); 
    } 
    else{ 
     marker.setPosition(location); 
    } 
    map.setCenter(location); 
    alert(marker.position); 
} 

을 대신 사용하는 것보다 alert이면 this answer에 제공된 링크를 따라 가면 정말 멋진 툴팁 효과를 얻을 수 있습니다. 확실하게 살펴볼 가치가 있습니다 - 답변은 튜토리얼과 데모를 연결합니다.

+0

지도에 마커가 하나만있는 방법이 있습니까? 클릭 할 때마다 표식이 나타납니다. –

+0

@ Johhan - 마커를 전역 변수로 설정 했습니까? 그렇지 않다면, 매번 새로운 것을 생성 할 것입니다. 프로그램의 최상위 레벨에서'var marker; '가 필요합니다 ... f – Floris

+1

https://developers.google.com/maps/documentation/javascript/examples/marker-remove 예제를 따라갈 수있었습니다. 감사합니다. 회신 –