首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter中缩放两个Google地图标记

在 Flutter 中使用 google_maps_flutter 插件时,你可以通过设置地图的视图边界来缩放和居中显示两个或多个标记。以下是一个详细的步骤指南,展示如何实现这一目标。

步骤 1: 添加 google_maps_flutter 依赖

首先,在你的 pubspec.yaml 文件中添加 google_maps_flutter 依赖:

代码语言:javascript
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

步骤 2: 获取 Google Maps API 密钥

确保你已经在 Google Cloud Platform 上启用了 Google Maps API,并获取了 API 密钥。将 API 密钥添加到你的 Android 和 iOS 项目中。

步骤 3: 创建 GoogleMap 控件

在你的 Flutter 应用中创建一个 GoogleMap 控件,并添加两个标记。以下是一个示例代码:

代码语言:javascript
复制
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));
  }
}

代码解释

  1. 初始化标记
    • initState 方法中,初始化两个标记并添加到 _markers 集合中。
  2. 创建 GoogleMap 控件
    • build 方法中,创建一个 GoogleMap 控件,并设置 initialCameraPositionmarkers
    • 使用 onMapCreated 回调获取 GoogleMapController 实例,并调用 _zoomToFitMarkers 方法。
  3. 缩放和居中标记
    • _zoomToFitMarkers 方法中,计算两个标记的边界 LatLngBounds
    • 使用 animateCamera 方法将地图视图缩放和居中到这两个标记。

注意事项

  • API 密钥:确保在 Android 和 iOS 项目中正确配置了 Google Maps API 密钥。
  • 权限:确保在 Android 和 iOS 项目中正确配置了位置权限。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券