Flutter谷歌地图嵌入插件google_map_iframe的使用

Flutter谷歌地图嵌入插件google_map_iframe的使用

Android Setup

在android/app/build.gradle文件中设置正确的minSdkVersion（如果之前低于19）：

android {
    defaultConfig {
        minSdkVersion 19
    }
}

iOS Setup

无需设置。

🔨 安装

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

dependencies:
  google_map_iframe: ^0.0.1

Import

导入插件包：

import 'package:google_map_iframe/google_map_iframe.dart';

Usage

创建一个GoogleMapIframe实例，并使用它来显示地图：

// 创建一个 GoogleMapIframe 实例
var map = GoogleMapIframe(
    apiKey: 'YOUR_API_KEY', // 替换为你的API密钥
    width: MediaQuery.of(context).size.width, // 设置宽度为屏幕宽度
    height: 250, // 设置高度为250像素
);

// 使用 fromLatLng 方法设置地图中心位置
map.fromLatLng('10.305385', '77.923029');

Example

以下是一个完整的示例代码，展示如何在Flutter应用中嵌入谷歌地图：

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GoogleMapIframe(
          apiKey: 'AIzaSyAQnYinSuCc5pBRQxDsH2jeSWO5E7vcNto', // 替换为你的API密钥
          width: MediaQuery.of(context).size.width,
          height: 250,
        ).fromLatLng('10.305385', '77.923029'), // 设置地图中心位置
      ),
    );
  }
}

通过上述步骤，你可以在Flutter项目中成功嵌入谷歌地图。希望这对你有所帮助！


更多关于Flutter谷歌地图嵌入插件google_map_iframe的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在Flutter应用中嵌入谷歌地图，虽然google_map_iframe这个插件并不是官方推荐或者广泛使用的插件（通常我们会使用google_maps_flutter插件），但如果你特定地想要使用google_map_iframe（假设它存在于某个第三方库中），你可以参考以下的方式来实现。不过请注意，由于这个插件不是官方的，可能需要在pub.dev上搜索并添加相应的依赖。

以下是一个假设性的代码示例，展示如何在Flutter中使用google_map_iframe插件（请注意，实际使用时需要根据该插件的文档进行调整）：

  1. 添加依赖： 首先，你需要在pubspec.yaml文件中添加google_map_iframe的依赖（假设该插件存在）。

    dependencies:
  flutter:
    sdk: flutter
  google_map_iframe: ^x.y.z  # 替换为实际版本号

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

  2. 导入插件： 在你的Dart文件中导入该插件。

    import 'package:google_map_iframe/google_map_iframe.dart';

  3. 使用插件： 接下来，你可以在你的Flutter应用中使用该插件来嵌入谷歌地图。以下是一个简单的示例，展示如何在Scaffold的body中使用GoogleMapIframe。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Map iFrame Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Map iFrame Example'),
      ),
      body: GoogleMapIframe(
        mapUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.438087658329!2d-74.00602688472287!3d40.712775679327445!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sus!4v1672533189579!5m2!1sen!2sus',
        frameStyle: GoogleMapIframeStyle(
          border: true,
          borderRadius: 10,
          borderColor: Colors.grey,
          width: double.infinity,
          height: 300,
        ),
      ),
    );
  }
}

    在上面的代码中，GoogleMapIframe是一个假设的组件，它接受一个mapUrl属性，该属性是谷歌地图的嵌入URL。frameStyle允许你自定义iFrame的样式，比如边框、边框半径、边框颜色、宽度和高度等。

重要提示：

  • 上面的代码是一个假设性的示例，实际使用时需要根据google_map_iframe插件的API文档进行调整。
  • 如果google_map_iframe插件不存在或者不推荐使用，建议使用官方的google_maps_flutter插件，它提供了更强大和稳定的功能。
  • 确保你的应用已经配置了必要的API密钥和权限来使用谷歌地图服务。
回到顶部