Bing Maps API问题：viewchangeend后Pushpin标记图标/文本不显示

问题 #

在viewchangeend事件触发后向地图添加标记时出现异常：

• 标记有时可见，有时不可见
• 标记的标题（title）能正常显示，但红色圆圈和标记文本（text）完全看不到
• 同一标记图层中添加的Polyline（折线）可正常显示

相关实现代码如下：

addMapMarker(latitude: number, longitude: number, index: number): Microsoft.Maps.Pushpin
{
    // Check if it is safe to add markers to the map (i.e if both map's height and width are > 0)
    // Otherwise start a timer to check when it is safe to add markers.
    if (this.isMapSafe())
    {
        const location = new Microsoft.Maps.Location(latitude, longitude);
        const pushPin = new Microsoft.Maps.Pushpin(location, {
            title: 'My Pin',
            text: 'lalala' + location.latitude + ' ' + location.longitude, 
            color:'red'
        });

        var center = this.map.getCenter();

        //Create array of locations
        var coords = [center, new Microsoft.Maps.Location(center.latitude + 1, center.longitude + 1)];

        //Create a polyline
        var line = new Microsoft.Maps.Polyline(coords, {
            strokeColor: 'red',
            strokeThickness: 3,
            strokeDashArray: [4, 4]
        });

        if ((pushPin) && (this.mapMarkerLayer))
        {
            this.mapMarkerLayer.add(line);
            this.mapMarkerLayer.add(pushPin);
        }

        return pushPin;
    }
    else
    {
        this.restartTimerToAddMarkers();
        return null;
    }
}

原因与解决方案 #

1. 地图视图过渡未完成，导致标记渲染异常 #

viewchangeend事件触发时，地图可能仍在处理视图切换的收尾渲染操作，此时添加Pushpin会因为渲染层未同步更新，导致图形部分（红色圆圈、文本）未被正确绘制；而标题作为独立DOM元素渲染，折线的渲染逻辑与Pushpin不同，因此不受影响。

解决办法：

• 延迟添加标记：在viewchangeend事件回调中延迟100-200ms执行标记添加逻辑，给地图足够的渲染完成时间：

// 绑定viewchangeend事件示例
Microsoft.Maps.Events.addHandler(this.map, 'viewchangeend', () => {
    setTimeout(() => {
        this.addMapMarker(目标纬度, 目标经度, 索引值);
    }, 150);
});

• 强制图层重绘：添加Pushpin后调用图层的setOptions方法触发重绘：

if ((pushPin) && (this.mapMarkerLayer))
{
    this.mapMarkerLayer.add(line);
    this.mapMarkerLayer.add(pushPin);
    // 触发图层重绘，确保标记图形更新
    this.mapMarkerLayer.setOptions({});
}

2. 标记图层层级被遮挡 #

如果存在其他图层覆盖在标记图层之上，会导致Pushpin的图形部分被遮挡，仅标题（DOM元素）能穿透显示。

解决办法：
创建标记图层时显式设置更高的zIndex，确保它处于顶层：

// 初始化标记图层时
this.mapMarkerLayer = new Microsoft.Maps.Layer({ zIndex: 100 });
this.map.layers.insert(this.mapMarkerLayer);

3. isMapSafe方法判断逻辑不充分 #

仅通过地图宽高判断是否安全添加标记，无法覆盖地图未完成初始化的场景，可能导致Pushpin创建时机过早。

解决办法：
增强判断条件，增加地图中心是否有效、地图是否完成初始化的检查：

isMapSafe(): boolean {
    const map = this.map;
    return !!map && map.getWidth() > 0 && map.getHeight() > 0 && !!map.getCenter();
}

4. 标记文本颜色与背景冲突（次要可能） #

若地图背景色过浅，Pushpin默认的白色文本可能难以分辨，可作为补充检查项：
显式设置文本颜色确保可见：

const pushPin = new Microsoft.Maps.Pushpin(location, {
    title: 'My Pin',
    text: 'lalala' + location.latitude + ' ' + location.longitude, 
    color:'red',
    textColor: 'black' // 显式设置文本颜色为黑色
});

内容的提问来源于stack exchange，提问作者catrpds