javascript - Bing map V8 图钉不透明度

标签 javascript css bing-maps

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

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

Custom Pushpins

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

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

PushpinOptions对象似乎没有任何与不透明度相关的东西。是否有用于解决此问题的官方或 hack-y 方式?

最佳答案

更改图钉的不透明度并不是一项普遍要求的功能,事实上,我认为这只是 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

关于javascript - Bing map V8 图钉不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47191242/

相关文章:

javascript - 将存储负载从 View 更改为 Controller ExtJS4

html - 合并 CSS 中的相似元素?

css - 我可以将正文与边注对齐吗?

Angular2 : ngIf without destroying component

google-maps - Google Maps API与Multimap/Bing Maps API

javascript - 如何清理 Node 中的对象数组?手动遍历它返回 'object Object'

javascript - 如何修复未捕获的类型错误 : Cannot read property 'settings' of undefined

javascript - 我们的一段 JavaScript 代码有问题

google-maps - 如何使用四叉树查找接下来的较低 5 层图 block 坐标

javascript - 如何在 AJAX JSON 调用后关闭 jQuery 对话框