我想在谷歌地图上标记一些数据。我使用eclipse Java EE和xml文件在同一个工作区中;(workspace_jsp)。
XML 文件:
<csv_data>
<row>
<time>10:01:43</time>
<latitude>37.4805016667</latitude>
<longitude>126.952741667</longitude>
<pdistance>0.000555</pdistance>
<totaldistance>0.000555</totaldistance>
<sectionspray>3343.0</sectionspray>
</row>
<row>
<time>10:01:57</time>
<latitude>37.4807483333</latitude>
<longitude>126.952753333</longitude>
<pdistance>0.027396</pdistance>
<totaldistance>0.027951</totaldistance>
<sectionspray>3320.0</sectionspray>
</row>
我的代码是
<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=~~~~"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.466285,126.948366),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("mark_info.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("/csv_data/row");
for (var i = 0; i < markers.length; i++) {
var time = markers[i].getAttribute("time");
var ss = markers[i].getAttribute("sectionspray");
var pd = markers[i].getAttribute("pdistance");
var td = markers[i].getAttribute("totaldistance");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var html = "<b>" + time + "</b> <br/>" + ss + pd + td;
var icon = customIcons[pd] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 2500px; height: 1500px"></div>
</body>
</html>
地图加载在浏览器(IE,CHrome)上,但标记和信息窗口。
出了什么问题,我该如何解决?请帮助我..
您的 xml
未格式化为 xml 属性。您无法使用 getAttribute 检索它。 数据是 XML 元素的内容。 我使用 geoxml3 中的nodeValue
函数从元素中检索文本。 要获取元素,您可以使用 getElementsByTagName
,它返回一个元素数组,如果只有一个,则为 [0]。
var markers = xml.getElementsByTagName('row');
for (var i = 0; i < markers.length; i++) {
var time = nodeValue(markers[i].getElementsByTagName("time")[0]);
var ss = nodeValue(markers[i].getElementsByTagName("sectionspray")[0]);
var pd = nodeValue(markers[i].getElementsByTagName("pdistance")[0]);
var td = nodeValue(markers[i].getElementsByTagName("totaldistance")[0]);
var point = new google.maps.LatLng(
parseFloat(nodeValue(markers[i].getElementsByTagName('latitude')[0])),
parseFloat(nodeValue(markers[i].getElementsByTagName('longitude')[0])));
var html = "<b>" + time + "</b> <br/>" + ss + pd + td;
var icon = customIcons[pd] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
概念验证小提琴
代码片段:
var map;
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();
var xml = xmlParse(xmlData);
var markers = xml.getElementsByTagName('row');
for (var i = 0; i < markers.length; i++) {
var time = nodeValue(markers[i].getElementsByTagName("time")[0]);
var ss = nodeValue(markers[i].getElementsByTagName("sectionspray")[0]);
var pd = nodeValue(markers[i].getElementsByTagName("pdistance")[0]);
var td = nodeValue(markers[i].getElementsByTagName("totaldistance")[0]);
var point = new google.maps.LatLng(
parseFloat(nodeValue(markers[i].getElementsByTagName('latitude')[0])),
parseFloat(nodeValue(markers[i].getElementsByTagName('longitude')[0])));
console.log(point.toUrlValue(6));
var html = "<b>" + time + "</b> <br/>" + ss + pd + td;
var icon = customIcons[pd] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bounds.extend(point);
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
/**
* Extract the text value of a DOM node, with leading and trailing whitespace trimmed.
*
* @param {Element} node XML node/element.
* @param {Any} delVal Default value if the node doesn't exist.
* @return {String|Null}
*/
var nodeValue = function(node, defVal) {
var retStr = "";
if (!node) {
return (typeof defVal === 'undefined' || defVal === null) ? null : defVal;
}
if (node.nodeType == 3 || node.nodeType == 4 || node.nodeType == 2) {
retStr += node.nodeValue;
} else if (node.nodeType == 1 || node.nodeType == 9 || node.nodeType == 11) {
for (var i = 0; i < node.childNodes.length; ++i) {
retStr += arguments.callee(node.childNodes[i]);
}
}
return retStr;
}
var xmlData = '<csv_data><row><time>10:01:43</time><latitude>37.4805016667</latitude><longitude>126.952741667</longitude><pdistance>0.000555</pdistance><totaldistance>0.000555</totaldistance><sectionspray>3343.0</sectionspray></row><row><time>10:01:57</time><latitude>37.4807483333</latitude><longitude>126.952753333</longitude><pdistance>0.027396</pdistance><totaldistance>0.027951</totaldistance><sectionspray>3320.0</sectionspray></row>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>