Geolocation 如何使用mapboxgl.GeolocateControl将标记添加到mapbox

我想在用户找到自己后添加一个标记

我尝试收听地理定位事件，但没有添加标记。 我应该如何进行

map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true,
        watchPosition: true
    }
}));
map.on('geolocate ', () => {
    map.loadImage('images/pin2.png', (error, image, data) => {
        if (error) throw error;
        console.log(data);
        map.addImage('pin2', image);
        map.addLayer({
            "id": "points",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [data.position]
                        }
                    }]
                }
            },
            "layout": {
                "icon-image": "pin2",
                "icon-size": 1
            }
        });
    });
});

---

geolocate事件实际上与geolocate对象绑定在一起，而不是与map对象绑定在一起

let geolocate = new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true,
        watchPosition: true
    }
});

map.addControl(geolocate);

geolocate.on('geolocate', (e) => {
    map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
        console.log(e)
        if (error) throw error;
        map.addImage('cat', image);
        map.addLayer({
            "id": "points",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [e.coords.longitude, e.coords.latitude]
                        }
                    }]
                }
            },
            "layout": {
                "icon-image": "cat",
                "icon-size": 0.3
            }
        });
    });
});

---

查看工作

首先确定问题是地理定位控件未触发，或标记不可见，还是两者的某种组合。那么-如果将代码移动到onload…，标记是否会显示？请注意，浏览器中的地理位置仅适用于https域。当连接不安全时，您将无法在地图上看到Geolocate控件。