Flutter静态地图展示插件google_static_maps_controller的使用

插件介绍

google_static_maps_controller 是一个为Flutter应用提供简单声明式访问Google静态地图服务的插件。通过这个插件，开发者可以轻松地在Flutter应用中集成和自定义静态地图。

功能特性

• ✅ - 已完成
• 🧪 - 实验性
• ⚙️ - 开发中
• ❌ - 未实现

快速开始

示例地图图片

源代码示例

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google static map demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

final retroMapStyle = [
  // 地图样式配置
];

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaticMap(
        googleApiKey: "<REPLACE-WITH-GOOGLE-API-KEY>",
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        scaleToDevicePixelRatio: true,
        zoom: 14,
        visible: const [
          GeocodedLocation.address('Santa Monica Pier'),
        ],
        styles: retroMapStyle,
        paths: <Path>[
          const Path(
            color: Colors.blue,
            points: [
              GeocodedLocation.address('Santa Monica Pier'),
              Location(34.011395, -118.494961),
              Location(34.011921, -118.493360),
              Location(34.012471, -118.491884),
              Location(34.012710, -118.489420),
              Location(34.014294, -118.486595),
              Location(34.016630, -118.482920),
              Location(34.018899, -118.480087),
              Location(34.021314, -118.477136),
              Location(34.022769, -118.474901),
            ],
          ),
          Path.circle(
            center: const Location(34.005641, -118.490229),
            color: Colors.green.withOpacity(0.8),
            fillColor: Colors.green.withOpacity(0.4),
            radius: 200, // meters
          ),
          const Path(
            encoded: true,
            points: [
              Location(34.016839, -118.488240),
              Location(34.019498, -118.491439),
              Location(34.024106, -118.485734),
              Location(34.021486, -118.482682),
              Location(34.016839, -118.488240),
            ],
            fillColor: Colors.black45,
            color: Colors.black,
          )
        ],
        markers: const <Marker>[
          Marker(
            color: Colors.amber,
            label: "X",
            locations: [
              GeocodedLocation.address("Santa Monica Pier"),
              GeocodedLocation.latLng(34.012849, -118.501478),
            ],
          ),
          Marker.custom(
            anchor: MarkerAnchor.center,
            icon: "https://goo.gl/1oTJ9Y",
            locations: [
              Location(34.012343, -118.482998),
            ],
          ),
          Marker(
            locations: [
              Location(34.006618, -118.500901),
            ],
            color: Colors.cyan,
            label: "W",
          )
        ],
      ),
    );
  }
}

使用 StaticMapController

Widget build(BuildContext context) {
  /// Declare static map controller
  const _controller = StaticMapController(
    googleApiKey: "<GOOGLE_API_KEY>",
    width: 400,
    height: 400,
    zoom: 10,
    center: Location(-3.1178833, -60.0029284),
  );

  /// Get map image provider from controller.
  /// You can also get image url by accessing
  /// `_controller.url` property.
  ImageProvider image = _controller.image;

  return Scaffold(
    body: Center(
      /// Display as a normal network image
      child: Image(image: image),
    ),
  );
}

注意事项

1. API Key：请确保替换 <REPLACE-WITH-GOOGLE-API-KEY> 和 <GOOGLE_API_KEY> 为你的Google Maps API密钥。
2. 依赖项：在pubspec.yaml文件中添加google_static_maps_controller依赖。

dependencies:
  flutter:
    sdk: flutter
  google_static_maps_controller: ^latest_version

1. 权限：确保在AndroidManifest.xml和Info.plist中添加必要的网络权限。

总结

google_static_maps_controller 提供了丰富的功能来展示和自定义静态地图。通过上述代码示例，你可以快速上手并在Flutter应用中集成静态地图。希望这篇指南对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。