在Flutter的Google地图中添加多个标记可以通过以下步骤实现:
以下是一个示例代码,演示如何在Flutter的Google地图中添加多个标记:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class GoogleMapPage extends StatefulWidget {
@override
_GoogleMapPageState createState() => _GoogleMapPageState();
}
class _GoogleMapPageState extends State<GoogleMapPage> {
GoogleMapController _mapController;
Set<Marker> _markers = {};
void _onMapCreated(GoogleMapController controller) {
_mapController = controller;
setState(() {
_markers.add(
Marker(
markerId: MarkerId('marker1'),
position: LatLng(37.7749, -122.4194),
icon: BitmapDescriptor.defaultMarker,
infoWindow: InfoWindow(
title: 'Marker 1',
snippet: 'This is marker 1',
),
),
);
_markers.add(
Marker(
markerId: MarkerId('marker2'),
position: LatLng(37.3382, -121.8863),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
infoWindow: InfoWindow(
title: 'Marker 2',
snippet: 'This is marker 2',
),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Map'),
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 12.0,
),
markers: _markers,
),
);
}
}
这个示例代码创建了一个GoogleMapPage页面,其中包含一个GoogleMap控件。在_onMapCreated回调函数中,通过GoogleMapController的addMarker方法添加了两个标记。可以根据需要添加更多的标记,并设置它们的位置、图标、标题和信息窗口。
推荐的腾讯云相关产品:腾讯位置服务(https://cloud.tencent.com/product/tianditu)
领取专属 10元无门槛券
手把手带您无忧上云