首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Flutter谷歌地图中显示2 LatLng作为初始位置

在Flutter中显示两个LatLng作为初始位置可以通过使用谷歌地图插件来实现。下面是实现的步骤:

步骤1:添加依赖 在pubspec.yaml文件中添加google_maps_flutter插件的依赖:

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

步骤2:获取API密钥 访问Google Cloud Console(https://console.cloud.google.com/)并创建一个新项目。然后,启用Maps SDK for Android和Maps SDK for iOS API。获取生成的API密钥。

步骤3:在Android和iOS中配置API密钥 在Android中,在AndroidManifest.xml文件的application标签内添加以下代码:

代码语言:txt
复制
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

在iOS中,打开AppDelegate.swift文件,将以下代码添加到application(_:didFinishLaunchingWithOptions:)方法中:

代码语言:txt
复制
GMSServices.provideAPIKey("YOUR_API_KEY")

步骤4:在Flutter中显示地图 在Flutter的页面中引入google_maps_flutter包,并使用GoogleMap组件来显示地图。以下是一个示例代码:

代码语言:txt
复制
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 location1 = LatLng(37.4219999, -122.0840575);
  final LatLng location2 = LatLng(37.4279617, -122.085749);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map'),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: location1,
          zoom: 14,
        ),
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        markers: {
          Marker(
            markerId: MarkerId('location1'),
            position: location1,
            infoWindow: InfoWindow(title: 'Location 1'),
          ),
          Marker(
            markerId: MarkerId('location2'),
            position: location2,
            infoWindow: InfoWindow(title: 'Location 2'),
          ),
        },
      ),
    );
  }
}

这个示例代码创建了一个名为MapScreen的Flutter页面,在页面上显示了一个包含两个标记位置的地图。在initialCameraPosition属性中设置了初始位置,markers属性用于添加标记。

注意替换YOUR_API_KEY为你在步骤2中获取的API密钥。

这样,你就可以在Flutter谷歌地图中显示两个LatLng作为初始位置了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券