单个标记上的setPosition触发所有标记的setContent

问题描述 投票:3回答:2

在我正在研究的其中一个应用中,基于车辆的最后已知速度,我每隔100毫秒插入车辆的下一个位置并将其绘制在地图上。这导致移动设备出现性能问题。

我们还使用MarkerWithLabels在Marker旁边放置一个标签

在运行性能分析器时,我注意到MarkerWithLabels中的setContent执行了很多次并导致大型布局重绘。

Performance Tab


Source Tab

放一个console.log显示它被称为我们拥有的所有标记,即使我们只改变其中一个的位置。

我在Codepen中重现了这个问题 - https://codepen.io/anon/pen/XZwGGr?editors=0011

简短的相关代码,

var i = 0.002;
setInterval(function() {
    dynamicMarker.setPosition(new google.maps.LatLng(-33.91627341958452 + i, 151.23648314155578 +i));
    i = i + 0.001;
    console.log('----------**----------');
}, 3000);

标记创建,

 var tempMarker = new MarkerWithLabel({
        map: map,
        animation: google.maps.Animation.DROP,
        position: positions[i],
        icon: markerIcon,
        labelContent: i.toString(),
        labelAnchor: new google.maps.Point(18, 12),
        labelClass: "my-custom-class-for-label", // the CSS class for the label
        labelInBackground: true
    });

我每隔3秒更新一个标记的位置。我还在HTML部分中修改了MarkerWithLabels的setContent函数。如果您打开控制台,您将看到setContent与内容一起打印。您会注意到,我们添加的所有标记都会发生这种情况,而不仅仅是正在更新的标记。

这是常见的吗?这是它应该如何表现?

javascript google-maps google-maps-markers
2个回答
1
投票

问题在于draw函数调用setContent,它看起来像draw被连续调用。

不确定是否应该是这种情况,但是一个小的更新(将最后使用的内容存储在标记中并且仅在更改时更新它)似乎可以解决问题(没有任何直接问题)

https://codepen.io/anon/pen/jZogKN


0
投票

你需要创建一个标记数组,因为它似乎是通过使用相同的var来保持它的引用(它发生在我身上)。

因此,您可以将标记推送到数组,并通过自定义ID或索引获取每个标记。

© www.soinside.com 2019 - 2024. All rights reserved.