1

GeoCoder を機能させようとして、髪を引っ張っています。Google から例を直接引っ張って HTML に貼り付けただけですが、それでもうまくいきません。これがコードです。

フィールドから取得した住所は、正常にジオコーディング関数に戻されます。すべてがコンソールにログアウトします。しかし、マップが更新されるだけで、何も起こりません。

コードも自分のサイトにアップロードしました。http://voidkat.com/geo/index.html

助けてください！！Google マップの複数マーカーの住所: 

              <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 に答える