Google maps 如何在Google Maps V3中显示具有不同图标的多个标记

我正在解析XML文件中的数据以放置标记。我目前使用一张图像绘制位置。我试图做的是根据XML文件中的变量设置不同的颜色标记。下面是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值，它需要是特定的颜色标记

这是我的代码

     <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>

var信息窗口；
var映射；
//从这里开始
var summary_html=“”；
var csummary_html=“”；
var total_html=“”；
var gmarkers=[]；
var i=0；
var j=0；
var thisurl='2013.xml'；
函数初始化（）{
var mylatng=new google.maps.LatLng（32.775833，-96.796667）；
变量myOptions={
泛控制：错误，
缩放：4，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL，
位置：google.maps.ControlPosition.RIGHT\u顶部
},
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
函数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（徽标）；
google.maps.event.addDomListener（logo，'click'，function（）{
window.location=http://www.mesquiteweather.net'; 
});
}
var logoControlDiv=document.createElement（'DIV'）；
var logoControl=新的MyLogoControl（logoControlDiv）；
logoControlDiv.index=0；//用于排序
map.controls[google.maps.ControlPosition.TOP_LEFT].push（logoControlDiv）；
下载URL（此URL，函数（数据）{
var xml=GXml.parse（数据）；
var markers=data.documentElement.getElementsByTagName（“死亡”）；
对于（var i=0；i

任何帮助或建议都会很好

---

-谢谢

首先，这不是一个真正的问题，但不合适：更改var logoControl=new MyLogoControl（logoControlDiv）；to var logoControl=MyLogoControl（logoControlDiv）；由于MyLogoControl不返回新对象，因此不需要使用“new”关键字。 现在，在下面（您链接到此处的测试页面上），您必须删除以下内容：

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

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;
}

因为您之前已经使用myOptions定义了贴图，所以未定义贴图选项。 然后，在downloadUrl函数的第一行中，删除以下内容：

var xml = GXml.parse(data);

因为它是不需要的。这些是我提到的主要问题。我还应该注意到，您的createXmlHttpRe