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

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

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

Journey的Static Maps平台专为开发者设计，易于使用和集成。通过遵循其Flutter快速入门指南，您可以轻松地在您的Flutter应用中添加静态地图。

示例代码

下面是一个如何在Flutter应用中使用static_map插件来展示带有路径和标记的静态地图的例子：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Static Map Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Static Map Example'),
        ),
        body: Center(
          child: StaticMapImage(
            options: StaticMapOptions(
              width: 400,
              height: 400,
              padding: 50,
              scale: 2,
              overlays: [
                // 添加路径到地图上
                StaticMapPath(
                  polyline:
                      'w}seFdghjVrDe@xAS~AQfAMJAZElAO~@KXC~AQWcEGw@IqAS_DEu@OgB?IAOASAQc@qGi@gI_@wFIqAg@gIzAS|ASvDc@l@Gx@Kt@I^G?YHu@DSBGBIJQBE^c@d@o@Pc@FWBKBS?m@g@yHC_@C]c@}GIiASaDKyAAWMeBEk@IoAIkAO{BOaCKqAGcAEk@Eu@IeAIyAMiBEw@SeDE?',
                  opacity: 0.9,
                  outlineSize: 0,
                ),
                // 添加起点标记
                StaticMapMarker(
                  point: StaticMapLatLng(37.79052, -122.43587),
                  color: Color(0xffC21DB3),
                  size: 8,
                ),
                // 添加终点标记
                StaticMapMarker(
                  point: StaticMapLatLng(37.78603, -122.41134),
                  color: Color(0xffC21DB3),
                  size: 8,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

结果图示

上述代码将生成如下所示的地图：

Example Map

开始使用

为了开始使用static_map插件，请确保查阅Journey官方文档获取完整的配置说明和更多高级用法。

请注意，您需要初始化StaticMap并提供API密钥和URL。这里有一个初始化的例子：

import 'package:static_map/static_map.dart';

void main() {
  StaticMap.initialize(
    apiKey: 'YOUR_API_KEY', // 替换为您自己的API密钥
    apiUrl: 'YOUR_API_URL', // 替换为您自己的API URL
  );

  runApp(MyApp());
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用static_map插件来展示静态地图的代码案例。static_map插件允许你通过URL生成静态地图图片并在Flutter应用中展示。

首先，确保你已经在pubspec.yaml文件中添加了static_map依赖：

dependencies:
  flutter:
    sdk: flutter
  static_map: ^最新版本号  # 请替换为实际最新版本号

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

接下来是一个完整的示例代码，展示如何使用static_map插件来展示静态地图：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Static Map Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Static Map Demo'),
      ),
      body: Center(
        child: StaticMapWidget(
          mapUrl: generateStaticMapUrl(
            center: LatLng(37.7749, -122.4194), // 旧金山
            zoom: 12,
            size: Size(300, 300),
            apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // 请替换为你的Google Maps API密钥
          ),
        ),
      ),
    );
  }

  String generateStaticMapUrl({
    required LatLng center,
    required int zoom,
    required Size size,
    required String apiKey,
  }) {
    // 构建静态地图URL
    final String baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
    final String markers = 'markers=color:red%7Clabel:A%7C${center.lat},${center.lng}';
    final String sizeParam = 'size=${size.width}x${size.height}';
    final String zoomParam = 'zoom=$zoom';
    final String keyParam = 'key=$apiKey';

    return '$baseUrl?$markers&$sizeParam&$zoomParam&$keyParam';
  }
}

class LatLng {
  final double lat;
  final double lng;

  LatLng(this.lat, this.lng);
}

class StaticMapWidget extends StatelessWidget {
  final String mapUrl;

  StaticMapWidget({required this.mapUrl});

  @override
  Widget build(BuildContext context) {
    return Image.network(mapUrl);
  }
}

代码解释：

  1. 依赖添加：在pubspec.yaml文件中添加static_map依赖。
  2. 生成静态地图URL：在generateStaticMapUrl函数中，根据提供的参数（中心点坐标、缩放级别、图片大小、API密钥）生成静态地图的URL。
  3. StaticMapWidget：一个简单的封装，使用Image.network来展示生成的静态地图URL对应的图片。
  4. MapScreen：主屏幕组件，包含AppBar和一个居中的StaticMapWidget。

注意事项：

  • 请确保你已经获得了Google Maps API密钥，并在代码中正确替换YOUR_GOOGLE_MAPS_API_KEY。
  • 静态地图服务有使用限制和费用，请参考Google Maps API文档了解详细信息。

这个示例展示了如何使用static_map插件在Flutter应用中展示静态地图。如果你有更具体的需求或问题，请随时提出！

回到顶部