在Flutter中显示两个LatLng作为初始位置可以通过使用谷歌地图插件来实现。下面是实现的步骤:
步骤1:添加依赖 在pubspec.yaml文件中添加google_maps_flutter插件的依赖:
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标签内添加以下代码:
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY"/>
在iOS中,打开AppDelegate.swift文件,将以下代码添加到application(_:didFinishLaunchingWithOptions:)方法中:
GMSServices.provideAPIKey("YOUR_API_KEY")
步骤4:在Flutter中显示地图 在Flutter的页面中引入google_maps_flutter包,并使用GoogleMap组件来显示地图。以下是一个示例代码:
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作为初始位置了。
领取专属 10元无门槛券
手把手带您无忧上云