Question

我是谷歌地图API的新手，但我一直在尝试一项相对简单的任务。显示多边形（从kml并使用geoXml3渲染），然后让地图放大用户点击的任何位置。但是，当我点击地图时，会弹出一个信息窗口（缩放或地图中心没有变化）。我尝试的google.maps.event.addListener函数相对简单。由于kml层或使用geoXml，它没有做任何事情吗？谢谢！

<!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>

Answer 1

问题似乎出现在 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>

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

1 个答案: