Flutter中的地图集成：使用google_maps_flutter

Flutter中的地图集成：使用google_maps_flutter

5 回复

使用google_maps_flutter插件，在Flutter中集成谷歌地图。

更多关于Flutter中的地图集成：使用google_maps_flutter的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成Google地图，使用google_maps_flutter插件。首先在pubspec.yaml中添加依赖，然后在代码中配置API密钥并初始化地图。

在Flutter中集成Google Maps，可以使用google_maps_flutter插件。首先，在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1

然后，在AndroidManifest.xml和Info.plist中配置API密钥。接着，在Dart代码中导入插件并创建一个GoogleMap widget：

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.0,
  ),
);

最后，确保在iOS和Android项目中正确配置了Google Maps SDK。

使用google_maps_flutter插件，添加Google地图到Flutter应用。

在Flutter中集成Google地图，可以使用google_maps_flutter插件。以下是一个简单的示例，展示如何在Flutter应用中集成Google地图。

1. 添加依赖

首先，在pubspec.yaml文件中添加google_maps_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

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

2. 获取API密钥

你需要在Google Cloud Platform上启用Maps SDK for Android和Maps SDK for iOS，并获取API密钥。将API密钥添加到Android和iOS项目中。

  • Android: 在android/app/src/main/AndroidManifest.xml中添加以下代码：

    <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

  • iOS: 在ios/Runner/AppDelegate.swift中添加以下代码：

    GMSServices.provideAPIKey("YOUR_API_KEY")

3. 创建地图

在Flutter中创建一个简单的Google地图：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps'),
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MapScreen(),
));

4. 运行应用

保存文件并运行应用，你应该能够看到一个显示在旧金山地区的Google地图。

5. 自定义地图

你可以通过添加标记、多边形、更改地图类型等方式进一步自定义地图。例如，添加一个标记：

GoogleMap(
  onMapCreated: _onMapCreated,
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 11.0,
  ),
  markers: {
    Marker(
      markerId: MarkerId('marker_1'),
      position: _center,
      infoWindow: InfoWindow(title: 'San Francisco'),
    ),
  },
);

通过这些步骤，你可以在Flutter应用中成功集成Google地图，并根据需要进行自定义。

回到顶部