必应地图 V8 图钉不透明度

Question

我想要做的是将鼠标悬停在页面上的另一个元素上，改变 Bing Maps V8 Pushpins 的不透明度。我知道这可以通过 Google 地图实现，因为我在那里实现了它，但我还没有找到 Bing 地图这样的选项。

目前我正在使用修改后的图钉在地图上标记公交车的位置：

这是我用来初始化引脚的代码示例：

new Microsoft.Maps.Pushpin(map.getCenter(), {
    icon: 'img/bus1.png',
    anchor: new Microsoft.Maps.Point(14, 44),
    visible: false,
    text: "",
    title: ""
})

PushpinOptions 对象似乎与不透明度无关。是否有官方或 hack-y 方式用于解决此问题？

Answer 1

更改图钉的不透明度并不是一个普遍要求的功能，事实上，我认为这只是 10 年来有人问及此问题的第二次。也就是说，有几种方法可以解决这个问题。由于您使用的是图像 URL，因此最简单的方法是创建另一个应用了不透明度的图像，然后根据需要更新图标属性。

如果您想要更复杂但更灵活的解决方案，您可以将 SVG 用于图钉并以这种方式动态控制不透明度。下面是一个使用不同设置创建基于 SVG 的图钉的示例：https://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Maker 由于您没有使用 text 属性，您可以轻松地将其用作 SVG 中的占位符以实现不透明度，并根据需要动态更新单个属性。

另一种方法是使用 HTML5 画布，这里是一个缩放图钉图像的示例：https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Pushpins/Pushpin_Scaled.html