Question

我正在使用谷歌地图api v3的JavaScript。我设法在我的网页上获取地图。现在我需要在用户点击地图时执行反向地理编码。因为我已经写了必要的事件监听器和反向地理编码代码

 <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表单中名为“start”的文本框中，但不会发生这种情况。地图正在加载到网站上，但它没有检测到点击事件。我正在使用localhost。我正在localhost上测试这个地图的这个功能。请帮忙。告诉我我哪里出错了，为什么它没有检测到点击事件。我是这个

的初学者

Answer 1

初始化地图后，您需要在初始化函数中设置点击侦听器：

    <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()">

working example

google map API v3，单击事件不会在Java脚本中被触发

1 个答案: