0

私はJavaScriptにGoogleマップAPI v3を使用しています。私は自分のウェブページで地図を取得することができました。ユーザーが地図をクリックしたときに逆ジオコーディングを実行する必要があります。そのために、必要なイベント リスナーと逆ジオコーディング コードを作成しました。

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=My_Key&sensor=false"></script>
 <script type="text/javascript"> 
    var map;
    function initialize() {
     var myLatlng = new google.maps.LatLng(-34.397, 150.644);
     var mapOptions = {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
         }
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }
     google.maps.event.addListener(map, 'click', function(event) {
     placeMarker(event.latLng);
     var myLatLng = event.latLng;
     var lat = myLatLng.lat();
     var lng = myLatLng.lng();
     var latlng = new google.maps.LatLng(lat, lng);

     //Code to reverse geocode follows
     geocoder.geocode({'latLng': latlng}, function( results, status ) {
     if ( status == google.maps.GeocoderStatus.OK ) {
        if ( results[1] ) {
           map.setZoom( 11 );
           marker = new google.maps.Marker({
               position: latlng,
               map: map
           });
           infowindow.setContent( results[1].formatted_address );
           infowindow.open( map, marker );
           document.forms["wheregoing"]["start"].value=results[1].formatted_address;
        }
     } else {
        alert("Geocoder failed due to: " + status);
     }
   });
  });


  function placeMarker( location ) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    map.setCenter(location);
  }

上記のコードは Java スクリプト用です。HTMLでは、次のようにマップを表示する場所を宣言しました

    <div id="map_canvas"></div>

私が直面している問題は、ユーザーがマップをクリックすると、その時点にプレースマーカーが配置され、住所が HTML フォームの「開始」という名前のテキストボックスに表示されるはずですが、そうではないということです。マップが Web サイトに読み込まれていますが、クリック イベントが検出されません。私はローカルホストで作業しています。ローカルホストでマップのこの機能をテストしています。助けてください。どこが間違っているのか、なぜクリックイベントが検出されないのか教えてください。私はこれの初心者です

4

1 に答える 1

2

マップを初期化した後、初期化関数内でクリック リスナーを設定する必要があります。

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=My_Key&sensor=false"></script>
    <script type="text/javascript"> 
    var map;
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    function initialize() 
    {
     var myLatlng = new google.maps.LatLng(-34.397, 150.644);
     var mapOptions = 
         {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
         }
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

     google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
      var myLatLng = event.latLng;
      var lat = myLatLng.lat();
      var lng = myLatLng.lng();
      var latlng = new google.maps.LatLng(lat, lng);

      //Code to reverse geocode follows
       geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
         if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
            position: latlng,
            map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
          document.forms["wheregoing"]["start"].value=results[1].formatted_address;
        }
       } else {
        alert("Geocoder failed due to: " + status);
       }
      });
     });
    }    

  function placeMarker(location) 
    {
    var marker = new google.maps.Marker({
    position: location,
    map: map
 });

  map.setCenter(location);
}
  </script>
  <body onload="initialize()">

実施例

于 2013-03-02T13:52:22.543 に答える