在Google Maps API中使用事件侦听器时，没有任何反应当我点击

我是Google Maps API的新手，但我一直在尝试一个相对简单的任务。显示多边形（从kml和用geoXml3渲染），然后让地图放大用户点击的任何位置。但是，当我点击地图时，会弹出一个信息窗口（缩放或地图中心不变）。我尝试的google.maps.event.addListener函数相对简单。它是因为kml图层还是使用geoXml而没有做任何事情？谢谢！在Google Maps API中使用事件侦听器时，没有任何反应当我点击

<!DOCTYPE html> 
<html> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script> 

    <script> 

     function initialize() { 

      var options = { 
       center: new google.maps.LatLng(36.0897,-79.4456), 
       mapTypeId: google.maps.MapTypeId.HYBRID 
      }; 

      var map = new google.maps.Map(document.getElementById("canvas"), options); 
      var geoXml = new geoXML3.parser({ 
       map: map, 
       singleInfoWindow: true, 
       infoWindowOptions: {maxWidth:550,cornerRadius: 15}, 
      }); 
      geoXml.parse("HUC.kml"); 

      google.maps.event.addListener(map, "click", function(event){ 
       map.setZoom(15); 
       map.setCenter(event.latLng.lat(),event.latLng.lng()); 
      }); 

     } 

     $(document).ready(initialize); 


    </script> 

    <h1 style="font-size=16px;text-align:center;color:blue"> Select HUC8 Polygons </h1> 
    <div id="canvas" style="width:1000px; height:500px"></div> 

    <h4> <a href="http://www.unc.edu/~mmallard/">Return to homepage </a> </h4> 

    <footer> 
     <p>Posted by: Megan Mallard <br> 
     Purpose: To have users interact with map displayed with Google Maps Javascript API and kml parsed with geoXML. <br></p> 
    </footer> 

<html>

来源

2014-11-05 Megan Mallard

什么是您的KML是什么样子？（HUC.kml） – geocodezip 2014-11-05 16:24:33

的问题似乎是在map.setCenter。它期望一个LatLng对象，而不是2个双参数。试试看：

<!DOCTYPE html> 
<html> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script src="geoxml3.js"></script> 
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script> 

<script> 

    function initialize() { 

     var options = { 
      center: new google.maps.LatLng(36.0897,-79.4456), 
      mapTypeId: google.maps.MapTypeId.HYBRID, 
      zoom: 5 
     }; 

     var infoWindowOpenCallback = function(event){ 
      map.setZoom(15); 
      map.setCenter(event.latLng); 
     }; 

     var map = new google.maps.Map(document.getElementById("canvas"), options); 
     var geoXml = new geoXML3.parser({ 
      map: map, 
      singleInfoWindow: true, 
      infoWindowOptions: {maxWidth:550,cornerRadius: 15, openInfoCallback: infoWindowOpenCallback}, 
     }); 
     geoXml.parse("http://www.unc.edu/~mmallard/interact_HUC/HUC.kml"); 

     google.maps.event.addListener(map, "click", function(event){ 
      map.setZoom(15); 
      map.setCenter(event.latLng); 
     }); 

     google.maps.event.addListener(geoXml, 'click', function(kmlEvent) { 
      var text = kmlEvent.featureData.description; 
      alert(text); 
     }); 

    } 

    $(document).ready(initialize); 


</script> 

<h1 style="font-size=16px;text-align:center;color:blue"> Select HUC8 Polygons </h1> 
<div id="canvas" style="width:1000px; height:500px"></div> 

<h4> <a href="http://www.unc.edu/~mmallard/">Return to homepage </a> </h4> 

<footer> 
    <p>Posted by: Megan Mallard <br> 
    Purpose: To have users interact with map displayed with Google Maps Javascript API and kml parsed with geoXML. <br></p> 
</footer>

来源

2014-11-05 16:23:42

我试过了你的代码版本，只要geoXml.parse行被注释掉，它就会工作。有没有一种方法可以显示kml多边形并使用我的addListener函数？ – 2014-11-05 16:30:53

你可以跟我分享这个.kml吗？ – 2014-11-05 16:34:17

当然，它是在：http://www.unc.edu/~mmallard/interact_HUC/HUC.kml – 2014-11-05 16:35:45

在Google Maps API中使用事件侦听器时，没有任何反应当我点击

回答

相关问题