我正在解析数据的XML文件以放置标记。我目前使用单个图像绘制位置。我想要做的是根据XML文件中的vaule设置不同的颜色标记。以下是XML文件的示例。
<fatalities>
<fatalities yrnum="1" date="2013-01-30" dt="Jan. 30, 2013" time="10:12:00" tz="CST" location="BARTOW" st="GA" deaths="1" intor="1" insvr="0" nrsvr="0" nowatch="0" watch="WT0019" ef="3" h="0" m="1" o="0" p="0" v="0" unk="0" slat="34.342" slon="-84.9527" elat="34.5981" elon="-84.7313"/>
<fatalities yrnum="2" date="2013-02-21" dt="Feb. 21, 2013" time="13:10:00" tz="CST" location="SABINE" st="TX" deaths="1" intor="0" insvr="0" nrsvr="0" nowatch="1" watch="NONE" ef="1" h="0" m="1" o="0" p="0" v="0" unk="0" slat="31.32" slon="-93.97" elat="31.32" elon="-93.98"/>
<fatalities yrnum="3" date="2013-04-11" dt="Apr. 11, 2013" time="10:38:00" tz="CST" location="KEMPER" st="MS" deaths="1" intor="0" insvr="0" nrsvr="0" nowatch="1" watch="NONE" ef="3" h="0" m="0" o="0" p="1" v="0" unk="0" slat="32.63" slon="-88.88" elat="33.42" elon="-88.20"/>
<summary STATE="GA" FATALITIES="1"/>
<summary STATE="MS" FATALITIES="1"/>
<summary STATE="TX" FATALITIES="1"/>
<csummary H="0" M="2" O="0" P="1" V="0" UNK="0"/>
<total TOTAL="3"/>
</fatalities>
XML文件中的值是ef，用于确定要在该位置放置哪个制造商。多年来我没有使用谷歌地图，但过去几周我一直在重新学习它，我已经经历了很多例子，并在网上搜索答案，我真的没有找到任何东西。
这是我设置的测试页面的链接。我需要使用的标记位于底部。我可以使用单个标记来绘制位置，但是一旦我尝试使用基于XML的ef值的不同标记，我什么也得不到。所以基本上我需要按位置绘制所有标记。根据XML中的ef值，它需要是某个颜色标记。
http://www.mesquiteweather.net/xml/googlemapkt.html
这是我的代码。
<script type="text/javascript">
var infowindow;
var map;
// start here
var summary_html = "";
var csummary_html = "";
var total_html = "";
var gmarkers = [];
var i = 0;
var j = 0;
var thisurl = '2013.xml';
function initialize() {
var myLatlng = new google.maps.LatLng(32.775833, -96.796667);
var myOptions = {
panControl: false,
zoom: 4,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function MyLogoControl(controlDiv) {
controlDiv.style.padding = '5px';
var logo = document.createElement('IMG');
logo.src = 'http://www.mesquiteweather.net/images/watermark_MW_GMap.png';
logo.style.cursor = 'pointer';
controlDiv.appendChild(logo);
google.maps.event.addDomListener(logo, 'click', function() {
window.location = 'http://www.mesquiteweather.net';
});
}
var logoControlDiv = document.createElement('DIV');
var logoControl = new MyLogoControl(logoControlDiv);
logoControlDiv.index = 0; // used for ordering
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
downloadUrl(thisurl, function(data) {
var xml = GXml.parse(data);
var markers = data.documentElement.getElementsByTagName("fatalities");
for (var i = 0; i < markers.length; i++) {
var yrnum = markers[i].getAttribute("yrnum");
var dt = markers[i].getAttribute("dt");
var tm = markers[i].getAttribute("time");
var ef = markers[i].getAttribute("ef");
var st = markers[i].getAttribute("st");
var loc = markers[i].getAttribute("location");
var watch = markers[i].getAttribute("watch");
var dead = markers[i].getAttribute("deaths");
var h = markers[i].getAttribute("h");
var m = markers[i].getAttribute("m");
var o = markers[i].getAttribute("o");
var v = markers[i].getAttribute("v");
var p = markers[i].getAttribute("p");
var unk = markers[i].getAttribute("unk");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("slat")),
parseFloat(markers[i].getAttribute("slon")));
var epoint = new google.maps.LatLng(parseFloat(markers[i].getAttribute("elat")),
parseFloat(markers[i].getAttribute("elon")));
var marker = createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch);
marker.setMap(map);
var polyline = new google.maps.Polyline({
path: [point, epoint],
strokeColor: lineColor[ef],
strokeOpacity: 0.8,
strokeWeight: 2
});
polyline.setMap(map);
}
});
}
var customIcons = {
"-1": "/images/icons/mm_1_white.png",
"0": "/images/icons/mm_20_white.png",
"1": "/images/icons/mm_20_orange.png",
"2": "/images/icons/mm_20_green.png",
"3": "/images/icons/mm_20_blue.png",
"4": "/images/icons/mm_20_red.png",
"5": "/images/icons/mm_20_black.png"
};
var lineColor = {
"-1": "#FFFFFF",
"0": "#FFFFFF",
"1": "#FFA500",
"2": "#008000",
"3": "#0000FF",
"4": "#FF0000",
"5": "#000000"
};
function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) {
var marker = new google.maps.Marker({position: point, icon: customIcons[ef]});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: location});
infowindow.open(map, marker);
});
return marker;
}
</script>
任何帮助或建议都会很棒！
-Thanks！
答案 0 :(得分：0)
首先，这不是一个真正的问题但是不合适：更改var logoControl = new MyLogoControl（logoControlDiv）; to var logoControl = MyLogoControl（logoControlDiv）;因为MyLogoControl不会返回新对象，所以不需要'new'关键字。 现在，在那里（在您已链接到此处的测试页面上），您必须删除以下内容：
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
因为您已经使用myOptions定义了之前的map，因此未定义mapOptions。 然后，在downloadUrl函数中的第一行，删除它：
var xml = GXml.parse(data);
因为不需要。那些是我注意到的主要问题。我还应该注意你的createXmlHttpRequest（）函数是不正确的，因为它首先检查是否存在window.ActiveXObject，应该避免这种情况，因为XMLHttpRequest（）现在更流行和标准，应该在任何可用的地方使用，包括在IE7 +中。因此，我建议将createXmlHttpRequest（）函数更改为以下内容：
function createXmlHttpRequest() {
var xhr = null;
try{//Mozilla, Safari, IE 7+...
xhr = new XMLHttpRequest();
if (xhr.overrideMimeType) {
xhr.overrideMimeType('text/xml');
}
} catch(e) {// IE 6, use only Msxml2.XMLHTTP.(6 or 3).0,
//see: http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){}
}
}
return xhr;
}
然后，我注意到的另一件事是这看起来不正确： infowindow = new google.maps.InfoWindow（{content：location}）; 我相信您需要{content：loc}
而不是{content：location}