メインコンテンツまでスキップ

Annotations

追加の開発者リソース

Add annotations to the map using point, line, polygon, and circle shapes using the AnnotationManager with the Mapbox Maps SDK for Flutter. Create annotation managers based on the type of annotation that you're interested in. Every AnnotationManager handles a collection of annotations. Once a manager has been created, you can create and add individually styled instances of the corresponding annotation type.

Benefits:

  • Built-in interaction support like tapping on annotations.
  • No external data file necessary.
  • Every annotation can be individually styled.
  • Every annotation layer can be adjusted to be above or below another layer.
  • Same performance benefits as using style layers.

Limitations:

  • No default image available.
  • Inefficient for adding many features to the map.

Markers​

A PointAnnotation can display any image at a fixed geographic coordinate.

Annotations are added after the initial map is loaded by using the onMapCreated callback. This example loads assets/custom-icon.png and adds it to the map at the coordinates -74.00913, 40.75183 (near New York City):

main.dart
 
  @override
 
  _onMapCreated(MapboxMap mapboxMap) async {
 
    this.mapboxMap = mapboxMap;
 
    pointAnnotationManager =
 
        await mapboxMap.annotations.createPointAnnotationManager();
 

 
    // Load the image from assets
 
    final ByteData bytes =
 
        await rootBundle.load('assets/custom-icon.png');
 
    final Uint8List imageData = bytes.buffer.asUint8List();
 

 
    // Create a PointAnnotationOptions
 
    PointAnnotationOptions pointAnnotationOptions = PointAnnotationOptions(
 
      geometry: Point(coordinates: Position(-74.00913, 40.75183)), // Example coordinates
 
      image: imageData,
 
      iconSize: 3.0
 
    );
 

 
    // Add the annotation to the map
 
    pointAnnotationManager?.create(pointAnnotationOptions);
 
  }

Other shapes​

The Mapbox Maps SDK for Flutter supports putting other shapes on the map including circles using CircleAnnotationManager, polylines using PolylineAnnotationManager, and polygons using PolygonAnnotationManager. These annotations work like the point annotations described above, but do not require an image. The options available for each type of annotation varies and you can find a full list in the API reference documentation.

EXAMPLE
Add circle annotations to the map

This example shows how to add circle annotations to a map, by placing visual indicators that mark a specific location.
Examples App on GitHub

You can explore more full-featured annotations examples in the Maps SDK for Flutter Examples App on GitHub.

追加の開発者リソース
このpageは役に立ちましたか？