0

我正在使用 google map api v3 for 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”的文本框中，但事实并非如此。地图正在网站上加载，但未检测到点击事件。我正在本地主机上工作。我正在本地主机上测试地图的这个功能。请帮忙。告诉我哪里出错了，为什么它没有检测到点击事件。我是这方面的初学者

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 回答