为标记划分聚类
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。

此示例将一组附近的标记定义为一个集群,以便地图在适当情况下将它们合并为单个标记。
开始使用
您必须先配置开发环境,然后才能试用该示例代码。如需了解详情,请参阅设置 Flutter 项目。
查看代码
Dart
// Copyright 2025 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
/// Defines a group of nearby markers as a cluster so that the map can
/// collapse them into a single marker when appropriate.
class ClustersSample extends StatelessWidget {
ClustersSample({super.key});
final ClusterManager _myCluster = ClusterManager(
clusterManagerId: ClusterManagerId('my cluster'),
);
@override
Widget build(BuildContext context) {
return GoogleMap(
initialCameraPosition: CameraPosition(target: LatLng(0, 0)),
// You have to supply the list of clusters that are referred to
// by the map's markers.
//
// Note: For clusters to work on the web, you *must* import an additional
// JavaScript library. Read the web README for info:
// https://pub.dev/packages/google_maps_flutter_web
clusterManagers: {_myCluster},
markers: {
// Google Maps will smartly cluster markers with the same
// clusterManagerId. When zoomed in close enough, the cluster will
// break up into individual markers.
Marker(
markerId: MarkerId('in 1'),
position: LatLng(6.51, 3.37),
clusterManagerId: _myCluster.clusterManagerId,
),
Marker(
markerId: MarkerId('in 2'),
position: LatLng(6.64, 3.52),
clusterManagerId: _myCluster.clusterManagerId,
),
Marker(
markerId: MarkerId('in 3'),
position: LatLng(6.46, 3.58),
clusterManagerId: _myCluster.clusterManagerId,
),
Marker(
markerId: MarkerId('in 4'),
position: LatLng(6.85, 3.63),
clusterManagerId: _myCluster.clusterManagerId,
),
// Markers without a clusterManagerId will always show independently.
Marker(markerId: MarkerId('out'), position: LatLng(5.31, -3.99)),
},
);
}
}
后续步骤
在 GitHub 上查看完整的示例集:
在 GitHub 上查看
或者,您也可以通过执行以下命令克隆完整的示例集,以便在本地运行这些示例:
git clone -b flutter_samples https://github.com/googlemaps-samples/flutter-maps-samples.git
cd flutter-samples
flutter pub get
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-29。
[null,null,["最后更新时间 (UTC):2025-08-29。"],[],[],null,["# Cluster markers\n\nThis example defines a group of nearby markers as a cluster so that the map can collapse them into a single marker when appropriate.\n\nGet started\n-----------\n\nBefore you can try the sample code, you must configure your development environment.\nFor more information, see [Set up a Flutter project](/maps/flutter-package/config).\n\nView the code\n-------------\n\n### Dart\n\n```python\n// Copyright 2025 Google LLC\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// https://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport 'package:flutter/material.dart';\nimport 'package:google_maps_flutter/google_maps_flutter.dart';\n\n/// Defines a group of nearby markers as a cluster so that the map can\n/// collapse them into a single marker when appropriate.\nclass ClustersSample extends StatelessWidget {\n ClustersSample({super.key});\n\n final ClusterManager _myCluster = ClusterManager(\n clusterManagerId: ClusterManagerId('my cluster'),\n );\n\n @override\n Widget build(BuildContext context) {\n return GoogleMap(\n initialCameraPosition: CameraPosition(target: LatLng(0, 0)),\n\n // You have to supply the list of clusters that are referred to\n // by the map's markers.\n //\n // Note: For clusters to work on the web, you *must* import an additional\n // JavaScript library. Read the web README for info:\n // https://pub.dev/packages/google_maps_flutter_web\n clusterManagers: {_myCluster},\n markers: {\n // Google Maps will smartly cluster markers with the same\n // clusterManagerId. When zoomed in close enough, the cluster will\n // break up into individual markers.\n Marker(\n markerId: MarkerId('in 1'),\n position: LatLng(6.51, 3.37),\n clusterManagerId: _myCluster.clusterManagerId,\n ),\n Marker(\n markerId: MarkerId('in 2'),\n position: LatLng(6.64, 3.52),\n clusterManagerId: _myCluster.clusterManagerId,\n ),\n Marker(\n markerId: MarkerId('in 3'),\n position: LatLng(6.46, 3.58),\n clusterManagerId: _myCluster.clusterManagerId,\n ),\n Marker(\n markerId: MarkerId('in 4'),\n position: LatLng(6.85, 3.63),\n clusterManagerId: _myCluster.clusterManagerId,\n ),\n\n // Markers without a clusterManagerId will always show independently.\n Marker(markerId: MarkerId('out'), position: LatLng(5.31, -3.99)),\n },\n );\n }\n}\nhttps://github.com/googlemaps-samples/flutter-maps-samples/blob/8f227e8b4d07179e5fb7cc5e8d8cb5440befd229/lib/samples/marker_clusters.dart\n \n```\n\nNext steps\n----------\n\nView the complete set of samples on GitHub:\n\n[View on GitHub](https://github.com/googlemaps-samples/flutter-maps-samples/tree/main/lib/samples)\n\nAlternatively, clone the full set of samples to run them locally by executing the following commands: \n\n git clone -b flutter_samples https://github.com/googlemaps-samples/flutter-maps-samples.git\n cd flutter-samples\n flutter pub get"]]