Bing Map v8 - 取消选择选定的图钉事件答案

【问题标题】：Bing Map v8 - deselect selected pushpin eventBing Map v8 - 取消选择选定的图钉事件
【发布时间】：2016-07-01 04:51:59
【问题描述】：

Bing 有 2 个用于图钉的 eventStyles。

enableHoverStyle：布尔值
enableClickedStyle：布尔值

转到下面的链接以查看这些活动/样式的实际效果 http://www.bing.com/api/maps/sdk/mapcontrol/isdk#setPushpinOptions+JS

所以我试图完成的是在选择另一个引脚时取消选择一个已经选择的引脚。有没有办法做到这一点？

已编辑：

我找到了一个解决方案，不确定它是否是最佳的，但就是这样。

我在图钉点击时触发了事件

Microsoft.Maps.Events.addHandler(pushpin, 'click', togglePinState);

然后，togglePinState 函数

function togglePinState(pinData){

        if(pinData.target == null)
            return;

        if(selectedPin == null){
            selectedPin = pinData.target;
            selectedPin.setOptions({enableClickedStyle: true});
            return;
        }
        if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin = pinData.target;
            selectedPin.setOptions({enableClickedStyle: true});
        }
    }

【问题讨论】：

标签： javascript events bing-maps

【解决方案1】：

在使用内置于 eventStyles 的 bing-v8 时，我还没有看到任何解决此特殊情况的代码，所以我希望这对某人有所帮助。

这是比我原始帖子中的代码更新的代码。现在这对我来说非常好。除非它不允许您取消选择引脚。更新代码可让您执行此操作，请看下面。

function togglePinState(pinData){

        if(pinData.target == null)
            return;

        if(selectedPin == null){
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
            return;
        }
        // Checks if the pin that triggered the event is not equal to the selected pin if so, we change states of both pins.
        if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin.setOptions({enableClickedStyle: true});
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
        }       
    }

更新 1

添加了当您只想将当前选定状态切换为取消选定状态时的功能。

function togglePinState(pinData){

        // Just in case
        if(pinData.target == null)
            return;

        // There is no selected Pin so we just assign the first pin to be the selectedPin
        if(selectedPin == null){
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
            return;
        }
        // Checks if the pin that triggered the event is not equal to the selected pin if so, we change states of both pins.
        else if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin.setOptions({enableClickedStyle: true});
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
        } 
        // if the pin that triggered the event is equal to the selected pin then we set everything to null.
        else {
            selectedPin = null;
            PopulateSidePanel(null);
        }       
    }

【讨论】：