更改内容信息窗口地图 v3答案

【问题标题】：change content infowindow maps v3更改内容信息窗口地图 v3
【发布时间】：2012-08-30 15:09:59
【问题描述】：

我正在尝试更改显示在 DIV 内的内容，该 DIV 是信息窗口的内容。我已经能够在信息窗口中将内容从 Hello 更改为 YO。问题是当我关闭信息窗口并重新打开它时，更新的内容会恢复为原始内容。以下是我的代码：

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
      if (event.type == google.maps.drawing.OverlayType.MARKER) {
          //event.overlay.setTitle("Hello");
          var infowindow = new google.maps.InfoWindow({
              content: '<div id="content" onmouseover="updateContent()">Hello</div>',
              maxWidth: 10
          });
          google.maps.event.addListener(event.overlay, 'click', function() {
              infowindow.open(map, event.overlay);
          });
      }
  });

  function updateContent() {
      document.getElementById('content').innerHTML = "Yo";
  }

我基本上想创建一个默认信息窗口，并允许用户在页面上放置标记后输入自己的文本...

【问题讨论】：

标签： javascript maps infowindow

【解决方案1】：

最好不要使用 HTML 字符串，而是使用 DOM 元素来创建 InfoWindow 的内容。所以替换：

new google.maps.InfoWindow({
        content: '<div id="content" onmouseover="updateContent()">Hello</div>'
    });

与：

var domElement = document.createElement('div');
domElement.innerHTML = '<div id="content" onmouseover="updateContent()">Hello</div>';
new google.maps.InfoWindow({
        content: domElement
    });

现在您可以使用document.getElementById("content"); 轻松访问 div 并进行所有您想要的 DOM 操作。

【讨论】：

这值得一枚奖牌。非常容易解决问题。这解决了一个我会在两行代码中花费大量时间的问题。谢谢。

【解决方案2】：

你必须通过 setContentHTML 方法设置内容

var infowindow ;
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay,'click',function()
        infowindow.open(map,event.overlay);
     });
}});

function updateContent(){
    infowindow.setContent("YO");
}

【讨论】：

当我尝试这个时，我得到一个错误，即 setContentHTML 不是 Google 的 infoWindow 对象的方法（我相信它是标准的 DHTML，但 Google 的 infoWindow 对象不继承它）。为了实现 OP 的目标，我分离了现有的 infoWindow，创建了一个带有新内容的新 infoWindow 对象，然后将其附加到现有标记上。
你可以改用“infowindow.setContent(...)”函数，这对我很有效:)
不错的标识
这不会为每个创建的叠加层创建一个信息窗口吗？您不能只创建一个信息窗口并根据需要进行更新吗？

【解决方案3】：

我发现上面接受的答案不起作用，因为我必须使用 setContent() 如下：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay, 'click', function () {
            infowindow.open(map, event.overlay);
        });
    }
});
function updateContent() {
    infowindow.setContent("Yo");
}

【讨论】：