GoogleMap v3 - 提取数据

时间:2011-11-24 07:00:31

标签: html google-maps

为什么我无法获取文本框中的纬度和经度值,我的文本框值不显示,如果我以类似的方式使用<span id="lat">,我可以查看我的纬度和经度值。< / p>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Gecoding</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true&v=3&libraries=geometry">
</script>
<script type="text/javascript">
var geocoder;
  var map;
  var marker;
  function initialize()
  {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(17.447246,78.362029);
     var myOptions =
         {
             zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
        map = new google.maps.Map(document.getElementById("map"), myOptions);
              var marker=new google.maps.Marker({
                position: latlng,
                 map: map
              });
                  marker.setMap(map);

        document.getElementById("lat").innerHtml=latlng.lat();
        document.getElementById("lng").innerHTML=latlng.lng();

}
  function getAddress()
    {

    var address = document.getElementById("address").value;

    var latlng;
    geocoder.geocode({'address': address},function(results, status)
    {

      if (status == google.maps.GeocoderStatus.OK)
      {
        latlng = results[0].geometry.location;
        document.getElementById("lat").innerHTML= latlng.lat();
        document.getElementById("lng").innerHTML= latlng.lng();
        map.setCenter(results[0].geometry.location);

        var markers = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        markers.setMap(Map);



     }

      else {
        alert("Geocode was not successful for the following reason: " + status);
           }

    });
    }
 </script>

<body onload="initialize();">


 <form action="./vf" onsubmit="getAddress();return false;" method="post">
 <table>
<tr>
      <td> <input id="address" type="text" size="60" name="address"/></td>
      <td> <input type="submit" value="Search!" /> </td>
</tr>
<tr>
        <td>Latitude
        <input type="text" name="latitude" id="lat" size="66" /></td>
</tr>
 <tr>
         <td>Longitude
               <input type="text" name="long" id="lng" size="66" /></td>
 </tr>

        <!--Latitude:<span name="latitude" id="lat"></span> <br /><br />
        Longitude: <span name="long" id="lng"></span>-->

</table>
</form>
<div align="center" id="map" style="width: 100%;top: 5%; height: 95%"><br/>
</div>
</body>
</html>

听到我的代码,任何人都可以搞清楚

1 个答案:

答案 0 :(得分:0)

更改代码

document.getElementById("lat").innerHTML= latlng.lat();
document.getElementById("lng").innerHTML= latlng.lng();

 document.getElementById("lat").value= latlng.lat();
 document.getElementById("lng").value= latlng.lng();