Geoxml3 CreatePolygon 函数

Question

我想知道如何在解析器选项中使用 createPolygon 函数。

这是我的索引文件，但它给我这个错误：无法读取未定义的属性 'bounds'。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geoxml3</title>
<style>
    html{height:100%;}
    body{height:100%;margin:0px;}
    #map_canvas{height: 90%;width: 90%;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>

</head>
<body>
<div id="map_canvas"></div>

<script type="text/javascript">
var geoXml="", map="";
var infowindow = new google.maps.InfoWindow({});

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(39.397, -100.644),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geoXml = new geoXML3.parser({
        map: map,
        zoom: true,
        createMarker: addMyMarker,
        createPolygon: addMyPolygon,
        singleInfoWindow: true,
        suppressInfoWindows: true
    });

    geoXml.parse('testPolygon.xml');

    function addMyMarker(placemark) {
        var marker = geoXml.createMarker(placemark);
            //marker.setAnimation(google.maps.Animation.BOUNCE);
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(placemark.description);   
                infowindow.setPosition(marker.getPosition());
                infowindow.open(map,marker);
            });
        };

        function addMyPolygon(placemark) {
            var polygon = geoXml.createPolygon(placemark);
            google.maps.event.addListener(polygon, 'click', function() {
                infowindow.setContent(placemark.description);   
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                var myLatlng = new google.maps.LatLng(lat,lng);
                infowindow.setPosition(myLatlng);
                infowindow.open(map,polygon);
            });
        };

    };
    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

我想知道我使用 'createPolygon:addMyPolygon' 函数的方式是否正确，或者问题出在哪里，我的意思是如何使用 createPolygon 函数为每个多边形设置点击监听器。我使用带有标记的 KML 的 createMarker 函数完成了它，但是在上面的文件中，createPolygon 没有解析我的 KML 文件。

我的 KML/XML 文件是： http://www.geocodezip.com/geoxml3_test/testPolygon.xml

Answer 1

createPolygon 函数需要 return 生成的多边形到 GeoXml3 以便它可以管理它。

function addMyPolygon(placemark) {
    var polygon = geoXml.createPolygon(placemark);
    google.maps.event.addListener(polygon, 'click', function(event) {
        var myLatlng = event.latLng;
        infowindow.setContent("<b>"+placemark.name+"</b><br>"+placemark.description+"<br>"+event.latLng.toUrlValue(6));   
        infowindow.setPosition(myLatlng);
        infowindow.open(map);
    });
    return polygon;
};

此外，如果您要在多边形 'click' 侦听器中使用 event，则需要对其进行定义。

working example

Geoxml3 CreatePolygon 函数

Geoxml3 CreatePolygon function

google-maps-api-3

geoxml3