变更内容的信息窗口地图V3(change content infowindow maps v3)

2019-07-31 10:01发布

我想有可能改变一个DIV是一个信息窗口里面的内容显示出来的内容。 我已经能够从你好内容更改为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";
  }

我基本上要经过他们放置坊间在页面上创建一个默认的信息窗口,并允许用户输入自己的文字...

Answer 1:

你必须设置通过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");
} 


Answer 2:

我发现,我不得不使用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");
}


Answer 3:

最好是不使用HTML字符串创建信息窗口的内容,但有一个DOM元素。 所以更换:

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
    });

现在,您可以轻松地访问DIV document.getElementById("content"); 做你想要的所有的DOM操作。



文章来源: change content infowindow maps v3