javascript - Google Maps API - 在 map 外显示标记信息

Question

这就是我想要实现的目标:

当您单击标记时，通常显示在气泡中的信息会显示在 map 外部的 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

只需更改创建信息窗口的代码即可设置 div 的内容:

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

编辑:您还想删除该行(函数bindInfoWindow之前的那一行)，它什么也不做，因为html不这样做此时不存在:

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