javascript - 如何在随 map 缩放的 HighMaps(或 HighCharts)中插入叠加图像

标签 javascript css image highcharts

我想在 map ( map 特征)上叠加图像,发现 HighMaps/HighCharts 有两个选项 - 但这些都不合适。我想知道是否还有其他选择?

选项 1:使用 renderer.image 嵌入图像 - 问题是图像与 map 断开连接,因此不会随 map 缩放。

选项 2:将图像嵌入为 map 符号 - 问题是这些会自动缩放,即当您放大 map ( map 变大)时,图标会变小。它们应该保持相同的比例并位于相同的位置,就好像它们是 map 本身的一部分 - 这可能吗?

另一个问题是我想插入很多小图片。最简单的方法是将它们作为一个大图像嵌入到 map 顶部,小图像周围的区域是透明的,这样您就可以看到下面的 map 。但是,问题在于它会阻止鼠标光标悬停在下面的 map 区域上。也许这可以通过 CSS 纠正?

感谢您对此的任何建议。

最佳答案

可以使用mappoint系列按经纬度添加点,然后将其marker.symbol值改为任意url(),在每个 selection 图表事件中,通过计算适当的当前比例来更改图像的大小和位置。 我准备了一个示例,如果您对代码及其工作方式有任何疑问,请告诉我。

示例如下:https://jsfiddle.net/vbou6sga/

关于javascript - 如何在随 map 缩放的 HighMaps(或 HighCharts)中插入叠加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51551560/

相关文章:

javascript - Angular Bootstrap 文本轮播垂直滚动

html - 使Facebook嵌入页面在一定宽度上消失

image - 如何更改存档类别 woocommerce 中的图像大小

javascript - 为 iOS Web View 和 Safari 移动开发应用程序时,主要(技术)区别是什么?

javascript - 在 javascript 中创建嵌套的 dom 节点时遇到问题

javascript - Kendo UI 网格不会触发创建、更新和销毁事件

javascript - 折叠并展开所有 bootstrap 3 Accordion

python - 如何垂直或水平堆叠两个 MultiCheckboxField wtform 字段

html - NSHTMLTextDocumentType 同步下载图片

c# - 从 varbinary case sql server c# 中读取图像