Mapbox GL JS点击标记后将标记信息从JS传递至C#的问题

问题根源 #

当前代码里的componentInstance.invokeMethodAsync("NotifyClickMarker",props.title)是在创建Marker时执行的，并非点击Marker触发；同时循环使用var导致变量作用域污染，点击时无法获取当前Marker对应的正确属性值。

修正代码 #

var features = mapBox.querySourceFeatures('marker-data', {
    layers: ['unclustered-point']
});

for (let i = 0; i < features.length; i++) {
    const coords = features[i].geometry.coordinates;
    const props = features[i].properties;

    if (props.cluster) continue;

    const id = props.title;
    let marker = markers[id];

    if (!marker) {
        const el = document.createElement('div');
        el.className = props.className;
        el.innerHTML = props.innerHTML;

        marker = markers[id] = new mapboxgl.Marker({
            element: el
        }).setLngLat(coords);

        // 绑定点击事件，点击时传递当前Marker的title
        el.addEventListener('click', () => {
            componentInstance.invokeMethodAsync("NotifyClickMarker", props.title);
        });
    }

    newMarkers[id] = marker;

    if (!markersOnScreen[id]) marker.addTo(mapBox);
}

关键修改点 #

• 循环变量改用let，确保每次迭代的props变量作用域独立，避免后续循环覆盖值
• 将参数传递逻辑移至点击事件监听函数内，仅在用户点击Marker时触发
• 直接给Marker的DOM元素绑定点击事件，保证点击行为与对应Marker的属性关联

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