Geoxml3 问题（kmz 库）答案

【问题标题】：Geoxml3 issue (kmz library)Geoxml3 问题（kmz 库）
【发布时间】：2018-11-28 10:42:07
【问题描述】：

我想从 KML 解析一个简单的标记，所以我一直在用 geoxml3 进行一些测试，如果我使用（导入）“polys/geoxml3.js”库，一切都会完美，但如果我将其更改为“kmz” /geoxml3.js'（因为稍后我想使用一些扩展数据）我收到此错误 'Cannot read property 'setAnimation' of undefined' 。除了使用 '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>

【问题讨论】：

i get an error.，什么错误？
我收到此错误 'Cannot read property 'setAnimation' of undefined' 。但是如果我更改（导入）“polys/geoxml3.js”库，一切都会完美！我怎么能解决它，但使用'kmz/geoxml3.js'库！谢谢
请更新您的问题以包含该信息。这是 kmz 分支 (issue 66) 的一个已知问题。代码需要确定图标的大小，这是一个异步操作。是否有不能使用内置 createMarker 函数的原因？
你的意思是不使用createmarker函数？喜欢在 afterParse 函数中创建标记？
我的建议是删除“自定义”createMarker 函数，让 geoxml3 使用内置函数。您可以通过将内置函数的内容复制到自定义函数中而不是调用它来解决问题。在 afterParse 函数中对地标进行后处理也可能有效。

标签： google-maps-api-3 geoxml3

【解决方案1】：

到目前为止，这是我使用“自定义”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
        });
    };

【讨论】：

【解决方案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>

【讨论】：