Google地图动态更改信息窗口

时间:2014-02-26 15:47:47

标签: javascript google-maps google-maps-api-3

关于谷歌地图API v3的相当直接的问题。

我想更改a>的点击事件的文字。标签。这样可以正常工作,但当infowindow关闭并重新打开时,文本将被重置。

条件:地图上会有多个标记。

以下是我在For Loop中定义实际调用的标记的代码(没有发布):

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

它可以正常更改文本,但是一旦我重新打开infowindow,它就会恢复默认状态。

有人有什么想法吗?

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

我上下搜索过,并没有找到解决方案。提前致谢。

(请原谅调试器代码)

1 个答案:

答案 0 :(得分:3)

当您使用字符串content时,每次打开InfoWindow时都会解析此字符串。

关闭InfoWindow时,将丢弃将根据您的content-property创建的DOMNode。

解决方案:使用Node而不是字符串作为content-property。已应用于此节点的更改将是永久性的(当您关闭InfoWindow时,节点将与文档分离,但他仍然存在,并且在下次打开InfoWindow时将再次用作内容)

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