1

我正在努力让 GeoCoder 工作。我什至直接从 Google 中提取示例并粘贴到我的 HTML 中，但它仍然无法正常工作。这是代码。

我从我的字段中捕获的地址会很好地传递回地理编码功能。一切都注销到我的控制台。但地图只是刷新，没有任何反应。

我也将代码上传到我的网站。http://voidkat.com/geo/index.html

请帮忙！！谷歌地图多标记地址： 

              <div id="map" style="width: 500px; height: 400px;"></div>

              <script type="text/javascript">
                var geocoder;
                var map;
                var address;
                  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"), mapOptions);
                  }

                  function codeAddress() {
                    e.preventDefault;
                    var address = document.getElementById("address").value;
                     console.log(address);
                    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
                        });
                      } else {
                        alert("Geocode was not successful for the following reason: " + status);
                      }
                    });
                  }
              </script>
            </body>
            </html>
4

1 回答 1

2

您需要放在onsubmit表单上，​​而不是onclick按钮上。

另外，要调用一个函数，你必须在它后面加上括号，即使它不接受参数，所以它e.preventDefault();不是e.preventDefault;. 并且在onsubmit（或任何on）的情况下，无法在函数内部取消事件，您必须使用onsubmit="event.preventDefault(); ...".

演示：http: //jsfiddle.net/eEEpj/

代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"
          type="text/javascript"></script>
</head>
<body onload="initialize()">
    <form id="addressForm" onsubmit="event.preventDefault();codeAddress();">
        <div>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" />
        <input type="submit" id="addressButton" value="Get Coordinates" />
        </div>
    </form>    

  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var geocoder;
    var map;
    var address;
  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"), mapOptions);
  }

  function codeAddress() {
     var address = document.getElementById("address").value;
     console.log(address);
    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
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

    /*
    //de infowindowz
    var infowindow = new google.maps.InfoWindow();

    //de markers
    var marker, i;

    //de locationz
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

    }
    */
  </script>
</body>
</html>
于 2012-07-18T23:46:30.060 回答