在 Google 地图中即时更改信息窗口的内容答案

【问题标题】：Changing content of info window on the fly in Google Map在 Google 地图中即时更改信息窗口的内容
【发布时间】：2014-02-05 05:53:02
【问题描述】：

我正在使用谷歌地图 v3 API。

我搜索一些实体，然后根据位置在地图上放置标记。现在每个标记都有自己的信息窗口，如名称、年龄、地点和一个选择按钮。单击选择按钮选择用户，按钮被禁用，文本变为使用 jQuery 的“选择”。但是当我再次打开该信息窗口时，它的“选择”按钮再次出现。再次推动标记以摆脱这个问题对我来说不是一个选项，因为用户可以选择多个用户。我不能即时更改按钮的类，这样我就不必再次打扰后端来放置新的标记。

我正在使用 Handlebar 模板生成信息窗口内容，我推送到信息窗口的标记详细信息是：

<script id="search-user" type="text/x-handlebars-template">
{ldelim}{ldelim}#user{rdelim}{rdelim}
<table border = '1' align = 'center'>
    <tr>
        <td rowspan='4' align='center'>
            <img id="selected-umpire-image-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                src='{$userImageKey}' border='1'>
        </td>
    </tr>
    <tr width='200'>
        <td align='left'>
            <strong>
                <a href='#' id="selected-umpire-name-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                    title="{ldelim}{ldelim}userName{rdelim}{rdelim}">
                    {ldelim}{ldelim}truncatedName{rdelim}{rdelim}
                </a>
            </strong>,
            <span id="selected-umpire-city-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                title="{ldelim}{ldelim}city{rdelim}{rdelim}">
                {ldelim}{ldelim}truncatedCity{rdelim}{rdelim}
            </span>
        </td>
    </tr>
    <tr>
        <td align='left' id="selected-umpire-ageGender-{ldelim}{ldelim}userId{rdelim}{rdelim}"
            attr-gender="{ldelim}{ldelim}gender{rdelim}{rdelim}" attr-age="{ldelim}{ldelim}dateOfBirth{rdelim}{rdelim}">
            {ldelim}{ldelim}gender{rdelim}{rdelim}, {ldelim}{ldelim}dateOfBirth{rdelim}{rdelim} years
        </td>
    </tr>
    <tr>
        <td align='left' id="selected-umpire-active-{ldelim}{ldelim}userId{rdelim}{rdelim}">
            Active as {ldelim}{ldelim}activeRolesString{rdelim}{rdelim} .
        </td>
    </tr>
    <tr>
        <td>
            <a href='#'>
                &nbsp;
            </a>
        </td>
        <td align='center'>
            <button type="button" id="select-{ldelim}{ldelim}userId{rdelim}{rdelim}"
                onclick="javascript:createMatch.selectUmpire(this)" rel="0"
            {ldelim}{ldelim}#selected{rdelim}{rdelim}
                 class="approve-button greenhover disabled-button select-entity" disabled="">
            {ldelim}{ldelim}/selected{rdelim}{rdelim}
            {ldelim}{ldelim}^selected{rdelim}{rdelim}
                class="approve-button greenhover">
            {ldelim}{ldelim}/selected{rdelim}{rdelim}

                <span class="bt-text">
                    {ldelim}{ldelim}#selected{rdelim}{rdelim}
                        Selected
                   {ldelim}{ldelim}/selected{rdelim}{rdelim}
                   {ldelim}{ldelim}^selected{rdelim}{rdelim}
                       Select
                   {ldelim}{ldelim}/selected{rdelim}{rdelim}
                </span>
            </button>
        </td>
    </tr>
</table>
{ldelim}{ldelim}/user{rdelim}{rdelim}

【问题讨论】：

你的代码是什么样的？
如果用户已经被选中，那么 selected 将为 true 并且按钮将被禁用
selectUmpire() 是做什么的？
它将ID添加到选定用户的哈希中

标签： javascript jquery google-maps google-maps-api-3 infowindow

【解决方案1】：

在所有 infoWindow 的谷歌地图中，内容已经绑定到标记，每当我们打开 infoWindow 时，我们都会在 infoWindow 上获得标记的绑定内容。

在谷歌地图中有一个已经准备好的 infoWindow 监听器，每次显示 infoWindow 时都会调用它。所以我们将监听器绑定为

google.maps.event.addListener(infoWindow, 'domready', function() {
    checkSelect(entityID); // EntityID here is the id of the user
});

因此，每当打开 infoWindow 时，都会调用函数 checkSelect。

并且 checkSelect 函数将检查传递的 ID 是否存在于哈希中。如果存在，则选择该用户，然后为当前信息窗口禁用“选择”按钮。我创建了一个虚拟示例。你可以在 http://jsfiddle.net/prabhat_rai/zpx7qfh5/

【讨论】：