Javascript 将动态KML加载到时间映射中
我正在尝试修改此链接--> 在上面的链接中，给定的kml是由硬代码数据创建的，但我使用来自数据库的用户定义数据创建kml，该数据库是Javascript 将动态KML加载到时间映射中,javascript,google-maps,kml,Javascript,Google Maps,Kml,我正在尝试修改此链接--> 在上面的链接中，给定的kml是由硬代码数据创建的，但我使用来自数据库的用户定义数据创建kml，该数据库是 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <kml xmlns="http://earth.google.com/kml/2.1"> <Document> <Style id="restaurantStyle"> <Ic
<?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 & 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>
http://maps.google.com/mapfiles/kml/pal2/icon63.png
http://maps.google.com/mapfiles/kml/pal2/icon27.png
泛非市场
华盛顿州西雅图第一大道1521号
#餐厅风格
-122.34014,47.60894
泰佛；酒吧
华盛顿州西雅图第二大道2222号
#酒吧风格
0.0,47.61359
这个
熔炉
华盛顿州西雅图美世街14号
#餐厅风格
-122.356445,47.62456
伊帕内玛烤架
华盛顿州西雅图第一大道1225号
#餐厅风格
-122.337654,47.606365
目的
房子
华盛顿州西雅图第一大道2230号
#酒吧风格
-122.34567,47.612823
蟹
壶
2008-01-16
华盛顿州西雅图阿拉斯加路1301号
#餐厅风格
-122.34036,47.60596
妈妈的墨西哥厨房
2008-01-05
华盛顿州西雅图第二大道2234号
#酒吧风格
0.0,47.613976
翼顶
2008-01-01
华盛顿州西雅图橄榄路1416号
#酒吧风格
-122.326584,47.617214
皮罗斯基皮罗斯基
2007-12-31
1908年，华盛顿州西雅图派克市
#餐厅风格
0.0,47.610126
<!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>
肯尼亚KML示例
var-tm；
$（函数（）{
tm=TimeMap.init({
mapId:“map”//map div元素的Id（必需）
timelineId:“timeline”//timeline div元素的Id（必需）
选项：{
eventIconPath:“../images/”
},
数据集：[
{
标题：“肯尼亚的暴力”，
主题：“绿色”，
类型：“kml”，//要在kml中加载的数据-必须是本地URL
选项：{
url:“kenya.kml”//kml要加载的文件
}
}
],
波段信息：[
{
宽度：“85%”，
intervalUnit:Timeline.DateTime.DAY，
间隔：210
},
{
宽度：“15%”，
intervalUnit:Timeline.DateTime.WEEK，
间隔时间：150，
showEventText:false，
轨道高度：0.2，
轨道间距：0.2
}
]
});
});
div#timelinecontainer{高度：310px；}
div#mapcontainer{高度：300px；}
但在我的例子中，标记显示在地图中，但不显示在时间线中，而且我不知道如何关联它们。有些您是否通过直接在浏览器中打开HTML文件在本地运行您的版本？该示例说明可能会产生一些错误-如果是，请尝试使用某种本地Web服务器：