javascript - Bing map v8 - 取消选择选定的图钉事件

Question

Bing 有 2 个图钉事件样式。

• enableHoverStyle: bool 值
• enableClickedStyle: bool 值

转到下面的链接查看这些事件/样式的实际效果 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});
        }
    }

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