📅  最后修改于: 2023-12-03 15:14:36.448000             🧑  作者: Mango
Dart 是一种开发高性能、移动应用、桌面应用、服务器端和web应用的全平台开发语言。Dart 的客户端开发可以直接使用 Flutter 进行开发,而 Flutter 也内置了一系列地图组件,其中最常用的是 google_maps_flutter
。
google_maps_flutter
是 Flutter 的一个地图组件,它可以让开发者简单地在 Flutter 应用上添加 GoogleMaps。它具有以下特点:
在加载地图时,google_maps_flutter
要求你提供 Google 地图服务的 API 密钥。在此之前,你需要在 Google 指南中的 Get Api Key 页面注册以获取 API 密钥。
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MapSample extends StatefulWidget {
@override
State createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
BitmapDescriptor pinLocationIcon;
final LatLng _center = const LatLng(45.521563, -122.677433);
void setCustomMapPin() async {
pinLocationIcon = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5),
'assets/destination_map_marker.png');
}
void onMapCreated(GoogleMapController controller) {
setCustomMapPin();
controller.animateCamera(CameraUpdate.newCameraPosition(
const CameraPosition(
bearing: 192.83,
target: LatLng(45.521563, -122.677433),
tilt: 59.440,
zoom: 11.00,
),
));
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(bottom: 20),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.arrow_forward),
),
),
)
],
),
);
}
}
在 Flutter 中使用 google_maps_flutter
添加地图功能非常简单,并且它提供的类库让您方便地自定义磁贴、覆盖物和地图样式,善加利用,将省去开发者的许多烦忧。