Bing 地图悬停航点图钉图标

Question

我正在开发一个带有 bing 地图的 Web 应用程序。我用这个方法来改变航点图钉图标：

directionsManager.setRenderOptions({
        itineraryContainer: document.getElementById('itineraryDiv'),
        waypointPushpinOptions: {
            icon: "/images/citta-nascosta/blue-pushpin.png", 
            height:29, 
            width:25, 
            draggable:false, 
            textOffset:new Microsoft.Maps.Point(-1,3)
        }
});

然后我渲染地图：

directionsManager.calculateDirections();

在站点中，我看到了带有自定义图标的图钉，但我也想更改悬停图标（实际上我看到的是悬停标准图标，蓝旗）。

有人知道如何设置自定义悬停航点图钉图标吗？或者阻止鼠标悬停事件？

Answer 1

尝试在waypointPushPinOptions 中使用hoverIcon，如下所示：

directionsManager.setRenderOptions({
        itineraryContainer: document.getElementById('itineraryDiv'),
        waypointPushpinOptions: {
            icon: "/images/citta-nascosta/blue-pushpin.png",
            hoverIcon: "/images/citta-nascosta/blue-pushpin-hover.png", 
            height:29, 
            width:25, 
            draggable:false, 
            textOffset:new Microsoft.Maps.Point(-1,3)
        }
});

此属性未记录。如果微软想让他们的地图 API 得到更多采用，他们应该真正齐心协力，而不是花钱让公司使用它。太马虎了！

Answer 2

您可以在创建图钉时在选项对象上设置 typeName 属性。这被设置为包含图钉的类名。

示例 - 如果您将 typeName 设置为 'waypoint'，那么在您的 css 中您可以：

div.waypoint {
  /* normal settings */
}
div.waypoint:hover {
  /* hover settings */
}

或者，您可以订阅图钉上的鼠标事件并作为响应更改图钉上的 typeName 属性并应用不同的 css 规则（如果 :hover 伪类不起作用）

希望对您有所帮助。