自定义地图标记

不仅“万物皆小部件”，而且“处处皆小部件”。
custom_map_marker 是一个将运行时小部件转换为地图标记图标的包。

特点

此包提供以下功能

  • 能够使用 Flutter 小部件创建运行时地图标记。
  • 捕获任何小部件列表的图像。

入门

首先，将 custom_map_markers 添加为 pubspec.yaml 文件中的依赖项。

dependencies:
  custom_map_markers: ^0.0.1

用法

  1. 使用 CustomGoogleMapMarkerBuilder 包装您的 GoogleMaps 小部件。
  2. 在 customMarkers 中定义每个标记及其自定义小部件
  3. 准备好自定义标记后，它们将作为 Set<Marer> 传递给 builder 函数。

final locations = const [  
  LatLng(37.42796133580664, -122.085749655962),  
  LatLng(37.41796133580664, -122.085749655962),  
];  

CustomGoogleMapMarkerBuilder(  
  customMarkers: [  
  MarkerData(  
        marker: Marker(  markerId: const MarkerId('id-1'), position: locations[0]),  
		child: _customMarker('A', Colors.black)),  
  MarkerData(  
        marker: Marker(  markerId: const MarkerId('id-2'), position: locations[1]),  
		child: _customMarker('B', Colors.red)),    
  ],  
  builder: (BuildContext context, Set<Marker>? markers) {  
    if (markers == null) {  
      return const Center(child: CircularProgressIndicator());  
  }  
    return GoogleMap(  
      initialCameraPosition: const CameraPosition(  
        target: LatLng(37.42796133580664, -122.085749655962),  
  zoom: 14.4746,  
  ),  
  markers: markers,  
  onMapCreated: (GoogleMapController controller) { },  
  );  
  },  
)

不是 Google 地图用户？

如果您不想使用 Google 地图，您可以使用
CustomMapMarkerBuilder，它接受 List<widgets> 而不是 List<MarkerData>，并返回 List<Uint8List> 而不是 Set<Marker>，因此您可以自由地按需使用捕获的 png 图像。

注意事项

  1. 确保您的标记小部件具有边界。
  2. 此包在渲染后捕获小部件标记的 png 图像，如果您的小部件需要更长时间才能渲染，例如 Image.network，您可以使用 screenshotDelay 参数来延迟捕获过程，以确保在捕获它之前您的窗口小部件已正确渲染。
  3. 要运行项目示例，您必须为 android/ios 目录添加有效的 Google Maps 密钥。

功能和 Bug

请随时

GitHub

查看 Github