Question

所以我有一个谷歌地图，上面有许多不同的标记图标供用户通过下拉菜单选择：

<div class="btn-group white">
  <a id="location-type-menu-button" class="btn btn-primary dropdown-toggle" data-    toggle="dropdown" href="#" >Select a Country <span class="caret"></span></a>
         <ul id="location-type-menu" class="dropdown-menu">
                <li><a value="ItemI" href="#">Item I</a></li>
                <li><a value="ItemII" href="#">Item II</a></li>
                <li><a value="ItemIII" href="#">Item III</a></li>             </ul>
</div>

现在，当选择下拉菜单时，它会通过这个jquery来改变按钮的文本：

$(window).load(function () {
            $("#location-type-menu li a").click(function () {
                $("#location-type-menu-button:first-child").text($(this).text());
                $("#location-type-menu-button:first-child").val($(this).text());
            });

        });

但我也希望它立即更改谷歌地图上的图标。谷歌地图标记由，最初设置为问号图标。

 var customIcons = {
            ItemI: {
                icon: 'http://...'
            },
            ItemII: {
                icon: 'http://...'
            },
            ItemIII: {
                icon: 'https:...'
            },
            question: {
                icon: 'https:...'
            }
};
var icon = customIcons['question'] || {};
var marker = new google.maps.Marker({
                position: location,
                icon: icon.icon,
                map: map,
                draggable: true
            });

由于只在创建新标记时调用了icon变量，我怀疑更改图标变量不是这样做的方法。

我尝试了几种不同的东西，但是我们选择不在此处包含它们，因为我认为它们并没有找到解决方案的正确途径。我真诚地感谢你的帮助。非常感谢！

Answer 1

确保您的标记在“点击”事件中定义，然后您只需更新图标

即可

e.g：

marker.setIcon(customIcons['ItemI'].icon);

使用jQuery下拉菜单更改谷歌地图图标

1 个答案: