javascript - 必应地图 - 无法在 clusteredPinCallback 中设置和访问图钉属性

Question

我在客户端的 Bing 地图有问题。

1. 我的地图上的标记代表一座建筑物，里面有公寓的数量。我正在使用自定义图钉实现 - SVG 图像 + 文本（公寓数量）。引脚正在正确渲染。
2. 我需要提供自定义集群解决方案。我需要显示集群网格内所有公寓的总和，而不是显示带有内部标记数量的集群图标。
3. 我发现有一个称为 map 的方法clusteredPinCallback，它可以访问数组，其中包含每个单个cluster grid.
4. 我正在尝试提供公寓的数量作为图钉选项参数，例如text，title等等，但没有一个是正确设置的。

const extendedPins = pins.map((pinItem, index) => {
        const options = {
                icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
                title: 123,
                text: 123
            };

        return new Microsoft.Maps.Pushpin(pin, options);
    });


    clusterLayer = new Microsoft.Maps.ClusterLayer(extendedPins, {
        clusteredPinCallback: createCustomClusteredPin,
        gridSize: 80
    });

    map.layers.insert(clusterLayer);
});

const createCustomClusteredPin = (cluster) => {
  console.warn(cluster)
}

console.log() response:

标签： javascriptbing-maps

Answer 1

似乎有两个问题：

1. 图钉的文本和标题需要是字符串，而您传递的是数字。

2. 在clusteredPinCallback中，集群的图钉已经创建，因此您可以通过setOptions调用对其进行自定义。

尝试在您的示例中替换相同的函数：

function createCustomClusteredPin(cluster) {
    cluster.setOptions({
        icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
        title: "123",
        text: "123" 
    });
}