javascript - 谷歌地图动态更改信息窗口

Question

关于 google maps API v3 的非常直接的问题。

我想更改 a> 标签的点击事件中的文本。这工作正常，但当信息窗口关闭并重新打开时，文本将被重置。

条件: map 上会有多个标记。

这是我定义标记的代码，它实际上是在 For 循环中调用的(没有发布):

contentString = 
    '<div id="infoContent">' +
    '<div id="siteNotice">' +
    '<h4 id="firstHeading" class="firstHeading">Store ' + 
    Store[x].StoreNumber + 
    ' - ' + 
    Store[x].Location + 
    '</h4>' +
    '<div id="bodyContent">' +
    '<ul>' +                          
    '<li><a onclick = "addDispatch(this,' + Store[x].DailyDispatchID +')"> Add </a></li>' +
    '</ul>' +
    '</div></div>';


infowindow = new google.maps.InfoWindow({
    content: contentString
});

bindInfoWindow(marker, map, infowindow, contentString)

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

如您所见，在内容字符串中，我定义了一个调用“addDispatch”的 onclick 事件。函数在这里:

function addDispatch(element, DispatchId) {            
    if (element.text == "Add") {
        $(element).text("Remove");
    } else {
        debugger;
        $(element).text("Add");
    }            
}

更改文本效果很好，但是一旦我重新打开信息窗口，它就会恢复为默认设置。

有人有什么想法吗？

我猜是因为事件处理程序绑定(bind)到标记窗口的内容字符串。

我已经上下搜索过，但找不到解决方案。先谢谢了。

(请原谅调试器代码)

Answer 1

当您使用字符串作为内容时，每次您打开信息窗口时都会解析该字符串。

当您关闭 InfoWindow 时，基于您的内容属性创建的 DOMNode 将被丢弃。

解决方案:使用节点而不是字符串作为内容属性。已经应用到这个节点上的更改将是永久性的(当您关闭信息窗口时，该节点将从文档中分离出来，但他仍然存在，并在您下次打开信息窗口时再次用作内容)

演示:http://jsfiddle.net/doktormolle/TLs8P/