将动态KML加载到时间映射中

时间:2013-10-18 09:18:06

标签: javascript google-maps kml

我正在尝试修改此链接 - > http://timemap.googlecode.com/svn/tags/2.0.1/examples/kenya.html 在上面的链接中,给定的kml是由硬编码数据创建的,但我使用来自数据库的用户定义数据创建了我的kml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
    <Style id="restaurantStyle">
        <IconStyle id="restaurantIcon">
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/pal2/icon63.png</href>
            </Icon>
        </IconStyle>
    </Style>
    <Style id="barStyle">
        <IconStyle id="barIcon">
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/pal2/icon27.png</href>
            </Icon>
        </IconStyle>
    </Style>
    <Placemark>
        <name>PanAfrica Market</name>
        <description>1521 1st Ave, Seattle, WA</description>
        <styleUrl>#restaurantStyle</styleUrl>
        <Point>
            <coordinates>-122.34014,47.60894</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Buddha Thai &amp; Bar</name>
        <description>2222 2nd Ave, Seattle, WA</description>
        <styleUrl>#barStyle</styleUrl>
        <Point>
            <coordinates>0.0,47.61359</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>The
            Melting Pot
        </name>
        <description>14 Mercer St, Seattle, WA</description>
        <styleUrl>#restaurantStyle</styleUrl>
        <Point>
            <coordinates>-122.356445,47.62456</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Ipanema Grill</name>
        <description>1225 1st Ave, Seattle, WA</description>
        <styleUrl>#restaurantStyle</styleUrl>
        <Point>
            <coordinates>-122.337654,47.606365</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Sake
            House
        </name>
        <description>2230 1st Ave, Seattle, WA</description>
        <styleUrl>#barStyle</styleUrl>
        <Point>
            <coordinates>-122.34567,47.612823</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Crab
            Pot
        </name>
        <TimeStamp>
            <when>2008-01-16</when>
        </TimeStamp>
        <description>1301 Alaskan Way, Seattle, WA</description>
        <styleUrl>#restaurantStyle</styleUrl>
        <Point>
            <coordinates>-122.34036,47.60596</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Mama's Mexican Kitchen</name>
        <TimeStamp>
            <when>2008-01-05</when>
        </TimeStamp>
        <description>2234 2nd Ave, Seattle, WA</description>
        <styleUrl>#barStyle</styleUrl>
        <Point>
            <coordinates>0.0,47.613976</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Wingdome</name>
        <TimeStamp>
            <when>2008-01-01</when>
        </TimeStamp>
        <description>1416 E Olive Way, Seattle, WA</description>
        <styleUrl>#barStyle</styleUrl>
        <Point>
            <coordinates>-122.326584,47.617214</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>Piroshky Piroshky</name>
        <TimeStamp>
            <when>2007-12-31</when>
        </TimeStamp>
        <description>1908 Pike pl, Seattle, WA</description>
        <styleUrl>#restaurantStyle</styleUrl>
        <Point>
            <coordinates>0.0,47.610126</coordinates>
        </Point>
    </Placemark>
</Document>
</kml> 

这是该链接的html页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Kenya KML Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
  type="text/javascript"></script>
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../lib/mxn/mxn.js?(google)"></script>
<script type="text/javascript" src="../lib/timeline-1.2.js"></script>
<script src="../src/timemap.js" type="text/javascript"></script>
<script src="../src/param.js" type="text/javascript"></script>
<script src="../src/loaders/xml.js" type="text/javascript"></script>
<script src="../src/loaders/kml.js" type="text/javascript"></script>
<script type="text/javascript">

var tm;
$(function() {
tm = TimeMap.init({
    mapId: "map",               // Id of map div element (required)
    timelineId: "timeline",     // Id of timeline div element (required) 
    options: {
        eventIconPath: "../images/"
    },
    datasets: [
        {
            title: "Violence in Kenya",
            theme: "green",
            type: "kml",     // Data to be loaded in KML - must be a local URL
            options: {
                url: "kenya.kml" // KML file to load
            }
        }
    ],
        bandInfo: [
        {
           width:          "85%", 
           intervalUnit:   Timeline.DateTime.DAY, 
       intervalPixels: 210
        },
            {
           width:          "15%", 
           intervalUnit:   Timeline.DateTime.WEEK, 
       intervalPixels: 150,
           showEventText:  false,
           trackHeight:    0.2,
           trackGap:       0.2
        }
    ]
    });
});
</script>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<style>
    div#timelinecontainer{ height: 310px; }
    div#mapcontainer{ height: 300px; }
</style>
  </head>

<body>
<div id="help">

    </div>
<div id="timemap">
    <div id="timelinecontainer">
      <div id="timeline"></div>
    </div>
    <div id="mapcontainer">
      <div id="map"></div>
    </div>
</div>

但在我的情况下,标记显示在地图中但不在时间轴中,我也不知道如何将它们联系起来。一些

0 个答案:

没有答案