Google maps 如何从XML在Google Maps V3的infobox中显示HTML

我正在解析一个XML文件中的数据，该文件绘制了标记的位置，这一部分非常有效。我试图通过HTML将信息添加到信息框中，其中包含XML文件中的信息。应该是这样的

但是如果你进入我的测试页面，点击一个标记，它不会以这种方式显示

这是我的代码，我正试图产生的信息框

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

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”
};
变量lineColor={
“-1”：“#FFFFFF”，
“0”：“#FFFFFF”，
“1”：“FFA500”，
"2":                    "#008000",
“3”：“#0000FF”，
“4”：“FF0000”，
"5":                    "#000000"
};
var infowindow=new google.maps.infowindow（）；
//从这里开始
var summary_html=“”；
var csummary_html=“”；
var total_html=“”；
var gmarkers=[]；
var i=0；
var j=0；
var thisurl='2013.xml'；
//这是从下面的xml处理循环调用的
函数createMarker（点、yrnum、dt、ef、tm、死、h、m、o、v、p、unk、loc、st、watch）{
var marker=new google.maps.marker（{position:point，icon:customIcons[ef]}）；
//这会使信息冒泡为文本/info
变量yy=dt.substr（-4）；
如果（ef==“-1”）{
ef=“尚未评级”；
}
var html=”“+yy+“杀手级龙卷风”#“+yrnum+”
“+dt+”+tm+“CST
”；
html+=“死亡人数：“+dead+”，EF“+EF+”
”；
html+=“县、州：“+loc+”、“+st+”
”；
html+=“Home:+h+”MHome:“+m+”外部：“+o+”建筑：“+p+”车辆：“+v+”Unk:“+Unk+”
”；
var ww=监视子串（2,6）；
//警报（yy）；
如果（观看！=“无”&&yy==2013）{//更新到当前yy并更改下面的其他链接！！！
链接=''；
html+=“在SPC监视中”#“+链接+”（单击打开SPC监视页面）
；
}
if（watch！=“NONE”&&yy>=2004&&yy更新：问题是您有两个不同的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;

}

html在代码的开头已经用var html格式化，但我一直在想如何显示它。我尝试了infowindow=new google.maps.infowindow（{content:html}）；但没有显示。HTML中包含的信息是从XML文件中提取的。请参见我的更新答案，您有两个createMarker函数的副本，使用的副本取决于您使用的浏览器…谢谢，是的，您是对的，我想这是因为上一个createMarker函数，但是，我无法删除该函数在没有显示地图的情况下，我在您提供的代码中添加了一些HTML，效果非常好。我只是无法在//alert（yy）之后添加最后一部分；一直到没有有效的手表。编辑：我知道了！谢谢你的帮助！有两个同名函数会导致问题。有些浏览器会使用其中一个，其他浏览器会使用另一个。请确保删除其中一个（你刚才没有修复的那个）.是的！我把所有的东西都移到了你提供的能工作的地方，成功地移除了另一个，一切都很好！再次感谢你的帮助！我有一种感觉，这就是原因，但我一直在思考如何将第一个添加到第二个并移除它。事实上，这是我需要移除的第一个，然后将第一个添加到第二个等一下！现在一切都好了！谢谢！