Javascript 更改内容信息窗口地图 v3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12289214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change content infowindow maps v3
提问by Tommy
I am trying to make it possible to change the content that shows up inside a DIV that is the content of an infowindow. I have been able to change the content from Hello to YO inside the infowindow. The problem is when I close the infowindow and reopen it the updated content reverts back to the original. Below is my code:
我试图使更改显示在作为信息窗口内容的 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";
}
I basically want to create a default info window and allow the user to input their own text after they place the marke on the page...
我基本上想创建一个默认的信息窗口，并允许用户在页面上放置标记后输入自己的文本......
采纳答案by Ramesh Kotha
you have to set the content through setContentHTML method
您必须通过 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");
}
回答by Bron Thulke
I found the above accepted answer didn't work as I had to use setContent() as follows:
我发现上面接受的答案不起作用，因为我必须使用 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");
}
回答by Lisa
Best is to create the content of the InfoWindow not by using a HTML string, but with a DOM Element. So replace:
最好的方法是不使用 HTML 字符串，而是使用 DOM 元素来创建 InfoWindow 的内容。所以替换：
new google.maps.InfoWindow({
content: '<div id="content" onmouseover="updateContent()">Hello</div>'
});
with:
和：
var domElement = document.createElement('div');
domElement.innerHTML = '<div id="content" onmouseover="updateContent()">Hello</div>';
new google.maps.InfoWindow({
content: domElement
});
Now you can easily access the div with document.getElementById("content");and do all the DOM manipulation you want.
现在您可以轻松访问 divdocument.getElementById("content");并执行您想要的所有 DOM 操作。
