高德点聚合，自定义单个点的样式，setData更新数据后，自定义样式未生效?

Question

cluster = new AMap.MarkerCluster(this.map, [], {
    gridSize: 60,
    renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
    renderMarker: this.renderMarker // 自定义非聚合点样式
})

renderMarker(context) {
    const { plateNo, status, direction } = context.data[0];
    console.log('自定义单个点样式', direction, status);

    const content = `
        <div>
            <img src="${this.shetTime(status)}" />
            <div>${plateNo}</div>
        </div>
    `;
    context.marker.setContent(content);
}

确切的说，是第一次setData后，自定义样式生效了。但再次setData后，样式未生效。
查看输出语句发现，每次setData后，会打印 2 次console.log，第一次的数据是新的，第二次的数据又变回首次setData的数据了。
而且还有个问题，只要拖动地图，Marker的数据会变回首次setData所设置的数据。

Answer 1

从你提供的代码和描述来看，可能存在的问题是在更新数据的过程中存在一些缓存或者是没有正确的清除旧数据的问题。想要解决这个问题，你可以在每次更新数据之前先清除已有的点，然后再设置新的数据。

首先，要在cluster对象上添加一个清除所有标记点的方法：

cluster.clearMarkers = function() {
    this.setMarkers([]);
};

接下来，在每次更新数据之前，先调用cluster.clearMarkers()方法清除旧的标记点：

// 在需要更新数据的地方
cluster.clearMarkers(); // 先清除旧数据
cluster.setMarkers(newData); // 设置新的数据

这样，每次更新数据时，旧的标记点都会被清除，然后再设置新的数据。这应该能解决自定义样式未生效的问题。

另外，关于拖动地图后，Marker的数据会变回首次setData所设置的数据的问题，你可以尝试在renderMarker方法中对context.marker对象添加一个_data属性，用于存储当前的数据，并在需要的时候访问这个属性：

renderMarker(context) {
    const { plateNo, status, direction } = context.data[0];
    console.log('自定义单个点样式', direction, status);

    const content = `
        <div>
            <img src="${this.shetTime(status)}" />
            <div>${plateNo}</div>
        </div>
    `;

    // 保存当前数据到_marker对象的_data属性上
    context.marker._data = context.data[0];
    context.marker.setContent(content);
}

这样，在拖动地图时，可以通过访问marker._data来获取正确的数据，而不会被回滚到首次设置的数据。