【发布时间】：2011-05-10 14:57:21
【问题描述】：
我正在尝试使用 jQuery 解析来自 YouTube API 的 XML 响应。我的目标是从结果中获取 url 链接和地理标记数据，并将标记插入谷歌地图。每个标记都将在 infoWindow 对象中嵌入一个 YouTube 视频。我向 YouTube 服务器发出的 API 请求要求在某些坐标 100 公里范围内提供带有地理标签数据的视频。现在我只是在处理一个本地文件。有人对解析 XML 并将视频添加到谷歌地图有任何建议吗？目前我正在尝试一种多维数组方法。 已知问题： 我的“latLng”变量未定义。它不应该是。这是我解决这个问题的少数线索之一。 有什么建议吗？
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$.get("videos.xhtml", "xml", function(xml) {
$(xml).find("entry").each(function() {
var id = $(this).children('id').text();
var content = $(this).children('content').text();
var vid = $(this).children("link [rel=alternate]").attr("href");
var location = $(this).children('georss:where').children('gml:Point').children('gml:pos').text().split(" -").join(",");
var marker = new Array(vid, location);
var markers = new Array();
markers.push(marker);
var latLng = new google.maps.LatLng(markers[0][1]);
var markers = new Array();
var myOptions = {
zoom: 19,
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var vidString = '<div style="width:450; height: 400;"><object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/2A-fuFeRekE&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/2A-fuFeRekE&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object></div>';
//use arrays
for (a = 0; a < markers.length; a++) {
var vidArray = new Array(markers[a][0]);
var infoWindow = new google.maps.InfoWindow({
content: vidArray
// is not emebeded
});
}
for (i = 0; i < markers.length; i++) {
var newMarker = new google.maps.Marker({
position: markers[i][1],
map: map,
title: "Hello World"
});
var marker1 = Array();
marker1.push(newMarker);
}
for (b = 0; b < markers.length; b++) {
// how do I make it add more marker listener
google.maps.event.addListener(marker1[b], "click", function(){
infoWindow.open(map, marker1[b])
});
}
alert(vid);
});
});
});
//I need to convert to a string
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
</html>
【问题讨论】：
标签： javascript jquery xml google-maps youtube-api