在Flutter中显示Google地图中的旅行时间,可以通过以下步骤实现:
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^1.2.0
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MapPage extends StatefulWidget {
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
GoogleMapController mapController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps'),
),
body: GoogleMap(
onMapCreated: (controller) {
setState(() {
mapController = controller;
});
},
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194), // 设置地图初始位置
zoom: 12.0, // 设置地图初始缩放级别
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class MapPage extends StatefulWidget {
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
GoogleMapController mapController;
String travelTime = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps'),
),
body: Column(
children: [
Expanded(
child: GoogleMap(
onMapCreated: (controller) {
setState(() {
mapController = controller;
});
},
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 12.0,
),
),
),
RaisedButton(
child: Text('获取旅行时间'),
onPressed: () {
getTravelTime();
},
),
Text(travelTime),
],
),
);
}
void getTravelTime() async {
final response = await http.get(
'https://maps.googleapis.com/maps/api/directions/json?origin=37.7749,-122.4194&destination=37.7749,-122.5194&key=YOUR_API_KEY');
final data = json.decode(response.body);
final duration = data['routes'][0]['legs'][0]['duration']['text'];
setState(() {
travelTime = '旅行时间:$duration';
});
}
}
在上述代码中,getTravelTime函数使用http包发送HTTP GET请求到Google Maps Directions API,并解析返回的JSON数据以获取旅行时间。请确保将YOUR_API_KEY替换为你在步骤1中获取到的API密钥。
这样,当用户点击"获取旅行时间"按钮时,就会调用getTravelTime函数并更新travelTime变量,从而在界面上显示旅行时间。
请注意,以上代码仅为示例,你可以根据自己的需求进行修改和扩展。同时,为了保证应用的安全性和稳定性,建议将API密钥存储在安全的地方,而不是直接在代码中硬编码。
领取专属 10元无门槛券
手把手带您无忧上云