setIcon() 更改图标但不更改具有大量标记的地图上的可寻址 DOM

Posted 2023-02-21

【中文标题】setIcon() 更改图标但不更改具有大量标记的地图上的可寻址 DOM

【英文标题】：setIcon() changing Icon but not changing addressable DOM on map with large number of markers

【发布时间】：2022-01-24 01:29:24

【问题描述】：

我首先用.setIcon() 更改标记的图标。 然后我旋转图标：

$('img[src="https://' + thedomain +
    '/xplorit_common/assets/SVG/map_radar.svg"]').css(
  'transform': 'rotate(' + adj_offset_bearing + 'deg)',
);

只需少量标记，一切都可以正常工作。但是当我有超过 200 多个标记时，图标将 不 旋转。在开发工具中查看元素时，标记图像确实发生了变化，但 <img> src 属性没有发生变化（甚至搜索 map_radar.svg 时）。哪个，回旋，对于图标不旋转是有意义的；因为该值在 DOM 中实际上是不可寻址的。但“正确”图标 可见

是没有意义的

我已经把这匹马打死了，需要一些外部输入。有什么想法吗？

【问题讨论】：

所有 200 多个标记都相同吗？它们是如何创建的？它们旋转的数量是否相同？请提供一个 minimal reproducible example 来证明您的问题，最好是功能性 StackSnippet。

【参考方案1】：

设置optimized:false选项

如果您使用带有 .svg 的自定义图标的特定标记，您可以使用大量标记来尝试一些困难。要绕过这个问题，您需要在构建标记时禁用默认设置的优化渲染属性。为此，只需在设置每个标记时添加行 optimized:false：

var marker = new google.maps.Marker(
   position: myLatlng,
   map: myGmap,
   icon: url: mySvgIconUrl,
   optimized: false
);

或者使用setOption() 方法：

marker.setOptions('optimized':false);

有关它的更多信息，您可以查看this section of the documentation

【讨论】：

PaulCrp 你统治！修复了问题。节日快乐，愿新的一年给你带来繁荣！

很高兴我的回答对您有所帮助。如果这是您问题的好答案，您可以单击答案旁边的复选标记（V 按钮）接受它（请参阅meta.stackexchange.com/questions/5234/…）