如何用XML在Google Maps V3的信息框中显示HTML

Question

我正在解析一个XML文件中的数据，该文件绘制了标记位置，该部分工作得很好。我试图通过HTML从XML文件中添加信息到信息框。这就是它应该看起来的样子。

http://www.mesquiteweather.net/images/Annual%20Fatal%20Tornado%20Summaries.png

但是如果你去我的测试页面，点击一个标记，它不会那样显示。

http://www.mesquiteweather.net/xml/googlemapkt.html

这是我试图生成信息框的代码。

<script type="text/javascript">
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"
};
var infowindow = new google.maps.InfoWindow();
// start here
    var summary_html = "";
    var csummary_html = "";
    var total_html = "";
    var gmarkers = [];
    var i = 0;
    var j = 0;
    var thisurl = '2013.xml';
// this is called from xml processing loop below
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]});
// this makes the info bubble text/info
    var yy = dt.substr(-4);
     if (ef == "-1") {
         ef = " Not rated yet";
          }
    var html = "<b>" + yy + " Killer Tornado #" + yrnum + "</b> <br/>" + dt + "&nbsp;" + tm + "&nbsp;CST<br/>";
        html += "Fatalities: " + dead + ", EF" + ef + "<br/>";
        html += "County, State: " + loc + ", " + st + "<br/>";
        html += "Home:" + h + " MHome:" + m + " Outside:" + o + " Bldg:" + p + " Vehicle:" + v + " Unk:" + unk + "<br/>";
    var ww = watch.substring(2,6);
    // alert(yy);
if (watch != "NONE" && yy == 2013) { // update to current yy and change other links below!!!
link = '<a href="http://www.spc.noaa.gov/products/watch/ww' + ww + '.html" target="_blank">' + ww + '</a>';
html += "In SPC Watch# " + link + " (Click to open SPC watch page)<br/>";
}
if (watch != "NONE" && yy >= 2004 && yy <= 2012) { // ww archive back to 2004  
link = '<a href="http://www.spc.noaa.gov/products/watch/' + yy + '/ww' + ww + '.html" target="_blank">' + ww + '</a>';
html += "In SPC Watch# " + link + " (Click to open SPC watch page)<br/>";
}
if (watch != "NONE" && yy < 2004) { // No archive!
//link = '<a href="http://www.spc.noaa.gov/products/watch/' + yy + '/ww' + ww + '.html">' + ww + '</a>';
html += "In SPC Watch# " + ww + "<br/>";
}
if (watch == "NONE") {
html += "No Watch in Effect.<br/>";
}
function getInfoWindowEvent(marker, html) {
    infowindow.setContent(html);
    infowindow.open(map, marker);
}
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.close();
        getInfoWindowEvent(marker, html);
        });
      }
// This function picks up the click and opens the corresponding info window
function myclick(i) {
       google.maps.event.trigger(gmarkers[i], 'click');
      }
  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 = MyLogoControl(logoControlDiv);
   logoControlDiv.index = 0; // used for ordering
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
    downloadUrl(thisurl, function(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);
       }
     });
      }
  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: loc});
  infowindow.open(map, marker);
    });
    return marker;
  }
</script>

我认为这与最后一个函数有关，但这就是我被困的地方，因为我知道这是不对的，我已经尝试了一切。我还在学习新的地图，因为我已经很多年没用过了。

任何建议或建议将是伟大的!

-谢谢!

Answer 1

UPDATE:问题是您有两个不同的createMarker函数。删除或重命名不应该使用的那个(没有以正确的形式创建html变量的那个)。

你的createMarker函数不会对传入的信息做任何事情(除了loc)，你需要把它添加到infowindow中，按照你想要的格式:

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() {
   var contentStr = loc // + other information, formatted as you want...
   if (infowindow) infowindow.close();
   infowindow = new google.maps.InfoWindow({content: contentStr});
   infowindow.open(map, marker);
 });
  return marker;
}