在 Flutter 中使用 google_maps_flutter
插件时,你可以通过设置地图的视图边界来缩放和居中显示两个或多个标记。以下是一个详细的步骤指南,展示如何实现这一目标。
google_maps_flutter
依赖首先,在你的 pubspec.yaml
文件中添加 google_maps_flutter
依赖:
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^2.0.6 # 请使用最新版本
然后运行 flutter pub get
来安装依赖。
确保你已经在 Google Cloud Platform 上启用了 Google Maps API,并获取了 API 密钥。将 API 密钥添加到你的 Android 和 iOS 项目中。
在你的 Flutter 应用中创建一个 GoogleMap
控件,并添加两个标记。以下是一个示例代码:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MapScreen(),
);
}
}
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
GoogleMapController? _controller;
final Set<Marker> _markers = {};
final LatLng _marker1 = LatLng(37.7749, -122.4194); // 旧金山
final LatLng _marker2 = LatLng(34.0522, -118.2437); // 洛杉矶
@override
void initState() {
super.initState();
_markers.add(Marker(
markerId: MarkerId('marker1'),
position: _marker1,
));
_markers.add(Marker(
markerId: MarkerId('marker2'),
position: _marker2,
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps Zoom to Markers'),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: _marker1,
zoom: 10,
),
markers: _markers,
onMapCreated: (GoogleMapController controller) {
_controller = controller;
_zoomToFitMarkers();
},
),
);
}
void _zoomToFitMarkers() {
if (_controller == null) return;
LatLngBounds bounds;
if (_marker1.latitude > _marker2.latitude && _marker1.longitude > _marker2.longitude) {
bounds = LatLngBounds(southwest: _marker2, northeast: _marker1);
} else if (_marker1.longitude > _marker2.longitude) {
bounds = LatLngBounds(
southwest: LatLng(_marker1.latitude, _marker2.longitude),
northeast: LatLng(_marker2.latitude, _marker1.longitude));
} else if (_marker1.latitude > _marker2.latitude) {
bounds = LatLngBounds(
southwest: LatLng(_marker2.latitude, _marker1.longitude),
northeast: LatLng(_marker1.latitude, _marker2.longitude));
} else {
bounds = LatLngBounds(southwest: _marker1, northeast: _marker2);
}
_controller!.animateCamera(CameraUpdate.newLatLngBounds(bounds, 50));
}
}
initState
方法中,初始化两个标记并添加到 _markers
集合中。build
方法中,创建一个 GoogleMap
控件,并设置 initialCameraPosition
和 markers
。onMapCreated
回调获取 GoogleMapController
实例,并调用 _zoomToFitMarkers
方法。_zoomToFitMarkers
方法中,计算两个标记的边界 LatLngBounds
。animateCamera
方法将地图视图缩放和居中到这两个标记。领取专属 10元无门槛券
手把手带您无忧上云