Flutter地图展示插件google_maps的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter 地图展示插件 google_maps 的使用

使用方法

要将 google_maps 插件集成到你的 Flutter 项目中，你需要遵循以下步骤：

  1. 添加依赖

    在你的 pubspec.yaml 文件中添加 google_maps_flutter 依赖：

    dependencies:
  google_maps_flutter: ^2.0.6

  2. 导入库

    在你的 Dart 代码文件中导入 google_maps_flutter 库：

    import 'package:google_maps_flutter/google_maps_flutter.dart';

  3. 包含 Google Maps API 脚本

    在你的 HTML 文件中包含 Google Maps API 脚本。请确保在你的 index.html 文件中添加以下脚本，并替换 YOUR_API_KEY 为你的实际 API 密钥：

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

示例代码

下面是一个简单的示例代码，展示了如何在 Flutter 中使用 google_maps_flutter 插件来展示一个基本的地图。

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: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  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: LatLng(-34.397, 150.644),
          zoom: 8,
        ),
      ),
    );
  }
}

完整示例

下面是完整的示例代码，包括一个基本的 Flutter 应用程序结构，用于展示 Google Maps：

main.dart

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: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  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: LatLng(-34.397, 150.644),
          zoom: 8,
        ),
      ),
    );
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
  <!-- 引入 Google Maps API -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <meta charset="UTF-8">
  <title>Flutter Google Maps 示例</title>
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

更多关于Flutter地图展示插件google_maps的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地图展示插件google_maps的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中使用google_maps_flutter插件来展示地图的示例代码。这个示例包括必要的步骤来集成和展示Google地图。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1  # 请检查最新版本号

2. 获取API密钥

在使用Google Maps之前，你需要从Google Cloud Platform获取一个API密钥。确保你的API密钥启用了Google Maps Android API和Google Maps iOS API（如果你打算在iOS设备上运行你的应用）。

3. 更新Android配置文件

在android/app/src/main/AndroidManifest.xml文件中添加你的API密钥：

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

4. 更新iOS配置文件

对于iOS，你需要在ios/Runner/Info.plist文件中添加以下配置，并确保你的API密钥已正确配置在Xcode的Capabilities中：

<key>NSLocationWhenInUseUsageDescription</key>
<string>Need location access</string>
<key>GOOGLE_MAPS_API_KEY</key>
<string>YOUR_API_KEY_HERE</string>

然后在Xcode中，打开Runner项目，选择Runner target，在Signing & Capabilities中启用Maps和Location Updates Background Mode。

5. 编写Flutter代码

创建一个Flutter页面来展示地图。以下是一个简单的示例：

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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Demo'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: LatLng(37.4219999, -122.0840575), // 旧金山
          zoom: 12.0,
        ),
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        },
        markers: Set<Marker>.of(<Marker>[
          Marker(
            markerId: MarkerId('marker_id_1'),
            position: LatLng(37.4219999, -122.0840575),
            infoWindow: InfoWindow(title: 'San Francisco', snippet: 'USA'),
          ),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller != null) {
            _controller!.animateCamera(CameraUpdate.newLatLngZoom(
              LatLng(40.712776, -74.005974), // 纽约
              12.0,
            ));
          }
        },
        tooltip: 'Go to New York',
        child: Icon(Icons.directions),
      ),
    );
  }
}

6. 运行应用

确保你的设备或模拟器已正确配置，然后运行你的Flutter应用。你应该能够看到一张显示旧金山并包含一个标记的Google地图，点击浮动按钮可以将地图中心移动到纽约。

这个示例展示了如何集成google_maps_flutter插件并展示一个基本的地图视图。你可以根据需要进一步自定义和扩展地图功能。

回到顶部