이벤트 리스너를 사용하여 입력 필드에 긴/위도로 지리 코드 추가

위치 검색을 기반으로 2 개의 입력 필드에 long 및 lat를 채우고 싶습니다. 나는 청취자를 추가하는 많은 다른 방법을 시도했지만 작동시키지 못합니다. 도움이 필요하십니까? 이 비트는이벤트 리스너를 사용하여 입력 필드에 긴/위도로 지리 코드 추가

먼저 내 자바 스크립트와 문서의 머리

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?&sensor=true"> 
    </script> 
<script type="text/javascript"> 

var geocoder; 
var map; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
} 

function codeAddress() { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
      google.maps.event.addListener(marker, 'dragend', function (event) { 
       document.getElementById("latbox").value = this.getPosition().lat(); 
       document.getElementById("lngbox").value = this.getPosition().lng(); 
      }); 
      } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
     } 

</script>

와 다음이 아래 내 몸의 HTML을

<body onload="initialize()" onunload="GUnload()"> 
    <p> 
    Enter an address, The latitude/longitude will appear in the text fields after each search. 
    </p> 
    <p> 
    <input id="address" type="textbox" value="New York, New York"> 
    <input type="button" value="Get Long and Lat" onclick="codeAddress()"> 
    </p> 

    <div id="latlong"> 
     <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p> 
     <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p> 
    </div> 

    <div id="map_canvas" style="width: 600px; height: 400px"></div> 

</body> 
</html>

내가 가진 문제가 있습니다 부분 다음과 같다이다 코드

google.maps.event.addListener(marker, 'dragend', function (event) { 
      document.getElementById("latbox").value = this.getPosition().lat(); 
      document.getElementById("lngbox").value = this.getPosition().lng(); 
     });

검색을 한 후에 입력 필드에 아무 것도 입력하지 않습니다.

출처

2012-10-19 Redwall

확실한 의미가 있습니다. 나는 이제 몇 가지를 놓쳤을 것입니다 ... – Redwall

드래그 리스너의 코드는 마커가 드래그 된 경우에만 실행됩니다. 지오 코더가 값을 반환 할 때 해당 필드를 업데이트하려면 다음 코드를 추가해야합니다.

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     document.getElementById("latbox").value = marker.getPosition().lat(); 
     document.getElementById("lngbox").value = marker.getPosition().lng(); 

     google.maps.event.addListener(marker, 'dragend', function (event) { 
      document.getElementById("latbox").value = this.getPosition().lat(); 
      document.getElementById("lngbox").value = this.getPosition().lng(); 
     }); 
     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    }

출처

2012-10-19 13:59:19 geocodezip

빠른 응답을 주셔서 감사합니다. – Redwall

이벤트 리스너를 사용하여 입력 필드에 긴/위도로 지리 코드 추가

답변

관련 문제