如何在mapbox中将标注添加到面

// 创建地图对象
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9
});

// 添加面图层
map.on('load', function() {
  map.addLayer({
    id: 'my-layer',
    type: 'fill',
    source: {
      type: 'geojson',
      data: {
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [[
            [-74.0, 40.7],
            [-73.9, 40.7],
            [-73.9, 40.8],
            [-74.0, 40.8],
            [-74.0, 40.7]
          ]]
        }
      }
    },
    paint: {
      'fill-color': '#f00',
      'fill-opacity': 0.5
    }
  });
});

// 创建标注
var marker = new mapboxgl.Marker()
  .setLngLat([-73.95, 40.75])
  .addTo(map);

// 将标注添加到面
map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['my-layer'] });
  if (features.length > 0) {
    var feature = features[0];
    var featureId = feature.id;
    marker.addTo(map);
    map.setFeatureState(
      { source: 'my-layer', id: featureId },
      { marker: marker }
    );
  }
});