谷歌地图API v3，点击事件没有在Java脚本中被触发

google map API v3, click event not getting fired in Java script

本文关键字：脚本 Java v3 API 事件 谷歌地图      更新时间：2023-09-26

我使用谷歌地图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表单，但它不会发生这样。地图正在网站上加载，但它没有检测到点击事件。我在一个本地主机工作。我正在本地主机上测试map的这个功能。请帮助。告诉我我在哪里出错，为什么不检测点击事件。我是初学者

在初始化映射之后，需要在initialize函数中设置单击侦听器:

    <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()">
工作示例

相关文章：