Question

我想从KML解析一个简单的标记，所以我一直在使用geoxml3进行一些测试，如果我使用（导入）'polys / geoxml3.js'库，一切都很完美，但如果我将它改为'kmz /geoxml3.js'（因为后来我想使用一些extendedData）我得到这个错误'无法读取属性'未定义'的setAnimation'。我如何解决它，但使用'kmz / geoxml3.js'库？

<!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 type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</div>
<script type="text/javascript">

var geoXml=null, map=null;
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,
        singleInfoWindow: true,
        suppressInfoWindows: true
    });

    geoXml.parse('exampleMarker.kml');

    function addMyMarker(placemark,doc) {
        var marker = geoXml.createMarker(placemark);
        marker.setAnimation(google.maps.Animation.BOUNCE);
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(placemark.description);
            infowindow.open(map,marker);
        });
        doc.markers.push(marker);
        return marker;
    };
};
google.maps.event.addDomListener(window, 'load', initialize);

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

我的KML文件是：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>Chicago Bike Parking</name>
<description>A map of 20 bike parking.</description>  
<Style id='bikeParkingIcon'>
  <IconStyle>
    <color>ffffffff</color>
    <colorMode>normal</colorMode>
    <scale>1.0</scale>
    <Icon id='bikeParking'>
      <href>icono.png
      </href>
    </Icon>
  </IconStyle>
</Style>
<Placemark>
  <name>2024 S Western</name>
  <address>2024 S Western Ave, Chicago, IL 60608</address>
  <phoneNumber></phoneNumber>
  <description>1 bike rack installed here. &lt;a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'&gt;More info&lt;/a&gt;.</description>
  <visibility>1</visibility>
  <styleUrl>#bikeParkingIcon</styleUrl>
  <Point>
    <coordinates>-87.685871,41.854533,1000</coordinates>
  </Point>
  <TimeStamp><when>2009-07-24</when>
</TimeStamp>
<ExtendedData xmlns:cdot="http://www.chicagobikes.org/data">
  <cdot:locName>Salvation Army</cdot:locName>
  <exampleTag>My data</exampleTag>
</ExtendedData>
</Placemark>
</Document>
</kml>

Answer 1

到目前为止，这是我使用＆＃39;定制＆＃39; createMarker函数，这样您就可以使用和定义自己的标记属性/选项。

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

    geoXml.parse('exampleMarker.kml');

    function addMyMarker(placemark,doc) {
        var marker = new google.maps.Marker({
            title: placemark.name,
            position: placemark.latlng,
            map: map,
            //This case href is the tag in my KML
            icon: placemark.style.icon.href
        });

        google.maps.event.addListener(marker, 'click', function() {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            infowindow.setContent(placemark.description);
            infowindow.open(map,marker);
        });
        //doc.markers.push(marker);
        return marker;
    };
    function useTheData(doc){
        $.each(doc[0].placemarks, function(index, value) {
            //Something
        });
    };

Answer 2

在您的描述标签中，我注意到有一个html锚标签，但没有被读取为html

<description>1 bike rack installed here. &lt;a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'&gt;More info&lt;/a&gt;.</description>

您可以将其封装在中，因此它应该看起来像这样

<description><![CDATA[1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.]]></description>

Geoxml3问题（kmz库）

2 个答案: