将多个图标添加到Bing地图API的图钉v8

问题描述:

Bing地图v8 - 我试图在地图中的特定位置表示多个图标/符号。将多个图标添加到Bing地图API的图钉v8

例如,在一个特定的位置,我想要一个表示位置的图钉,并且我希望在图钉下方有另一个图标/符号,表示位置的严重程度(高度拥挤 - 红色,中等拥挤 - 黄色,不太拥挤 - 绿色)。

我不希望在图钉(图像)本身中显示此图像,但我希望在图钉图像和位置标题下显示此图像。

使用7版bing地图,可以添加至少一个不同颜色的边框以满足我的要求,但是在v8 bing地图中,不可能添加自定义CSS/HTML。

另外我希望可拖动puspin。有HTMLPushpins,但它们不提供适当的图钉拖动。

最早的帮助或需要更多的信息?提前致谢!

示例图像:当您在以下链接中看到标记时,但它在bing地图中不起作用我不知道为什么!

`https://jsfiddle.net/BalakrishnanE/19z7rd1h/#&togetherjs=NwAKHyPv9G` 

我强烈推荐使用SVG模板来查看图钉。这将允许您使用形状颜色选项轻松更改颜色。下面是一个提供不同SVG图钉模板示例的工具:http://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Maker

如果您可以提供要创建的图钉的屏幕截图,那么我可以看看是否可以将SVG模板放在一起。

+0

附上了一个示例图片我的问题..我也有附加图像的SVG标记..但它不仅仅是在bing地图工作我duno为什么..但我可以成功地在w3schools编辑器中加载该图像.. –

+0

问题在于你的SVG包含一个指向外部图像的链接。为了在HTML5画布上呈现SVG,它通过图像标签加载并在画布上绘制。该过程发生得比外部图像加载的速度快。为了解决这个问题,请将外部图像转换为数据uri并将其放入svg的href属性中。这是一个简单的在线转换图像的工具,只需将其拖放即可。 http://www.cssportal.com/image-to-data/现在你使用的图像相当大,但基本。将它转换为纯SVG会更有意义,因为它会小很多 – rbrundritt

+0

感谢@rbrundritt!明白!我现在几乎能够得到我想要的东西..现在这是好的,我希望我能解决将来出现的这些问题!但如果我面临任何问题,我会发表评论..感谢您的帮助! –