1

我正在解析用于放置标记的数据的 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 值，它需要是某种颜色标记。

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>

任何帮助或建议都会很棒！

-谢谢！

4

1 回答 1

0

首先，这不是真正的问题，但不正确：更改 var logoControl = new MyLogoControl(logoControlDiv); 到 var logoControl = MyLogoControl(logoControlDiv); 因为那里不需要 'new' 关键字，因为 MyLogoControl 不返回新对象。现在，在下面（在您链接到此处的测试页面上）您必须删除以下内容：

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}

于 2013-04-29T06:20:24.553 回答