0

KML から単純なマーカーを解析したいので、geoxml3 でいくつかのテストを行っています。「polys/geoxml3.js」ライブラリを使用 (インポート) するとすべてが完璧になりますが、「kmz/geoxml3.js」に変更するとjs' (後でいくつかの extendedData を使用したいため) '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>
4

2 に答える 2

0

これまでのところ、これは「カスタム」 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
        });
    };
于 2015-06-12T02:40:23.900 に答える