Question

我正在使用谷歌地图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}

Answer 1

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

在Google地图中，有一个关于infoWindow的侦听器，它是每次显示infoWindow时调用的。所以我们将监听器绑定为

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

因此，当打开infoWindow时，将调用函数checkSelect。

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

在Google地图中动态更改信息窗口的内容

1 个答案: