Question

这就是我想要完成的事情：

当您点击标记时，通常会显示在气泡中的信息会显示在地图外的DIV中，位于右侧的部分中，并带有自己的格式。

我不确定该怎么做。我尝试了here的建议，但那是从2007年开始的，我认为现在不推荐使用GDownload（）函数。或者至少，我在Google Developer网站的文档和API列表中找不到任何引用。

我所知道的是，我需要以某种方式将以下内容转换为DIV。

downloadUrl("genxml.php", function(data) {
  var xml = data.responseXML;
  var locations = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < locations.length; i++) {
    var name = locations[i].getAttribute("name");
    var address = locations[i].getAttribute("address");
    var type = locations[i].getAttribute("type");
    var point = new google.maps.LatLng(
        parseFloat(locations[i].getAttribute("lat")),
        parseFloat(locations[i].getAttribute("lng")));
    var html = "<div id=loc> <div class=loc-name>" + name + "</div> <br/>" + address + "<br/>" + "<div class=loc-type>" + type + "</div></div>";
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
  }
});
}
 document.getElementById("loc-info").innerHTML = html;

 function bindInfoWindow(marker, map, infoWindow, html) {
   google.maps.event.addListener(marker, 'click', function() {
     infoWindow.setContent(html);
     infoWindow.open(map, marker);
   });
 }

有人能指出我正确的方向吗？

Answer 1

只需更改创建infowindow的代码即可设置div的内容：

 function bindInfoWindow(marker, map, infoWindow, html) {
   google.maps.event.addListener(marker, 'click', function() {
     document.getElementById('loc-info').innerHTML = html;
   });
 }

编辑：您还要删除该行（function bindInfoWindow之前的那行），该行不执行任何操作，因为此时html不存在：< / p>

document.getElementById("loc-info").innerHTML = html;

Google Maps API - 在地图外显示标记信息

1 个答案: