Bing 地图 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 由于您没有使用文本属性，您可以轻松地将其用作 SVG 中的占位符以获得不透明度并动态更新单个属性根据需要。

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

Bing 地图 V8 图钉不透明度

Bing Maps V8 Pushpin Opacity

javascript

css

bing-maps