📜  dart 地图列表 - Dart (1)

📅  最后修改于: 2023-12-03 15:14:36.448000             🧑  作者: Mango

Dart 地图列表

Dart 是一种开发高性能、移动应用、桌面应用、服务器端和web应用的全平台开发语言。Dart 的客户端开发可以直接使用 Flutter 进行开发,而 Flutter 也内置了一系列地图组件,其中最常用的是 google_maps_flutter

Google Maps Flutter

google_maps_flutter 是 Flutter 的一个地图组件,它可以让开发者简单地在 Flutter 应用上添加 GoogleMaps。它具有以下特点:

  • 常用的地图操作,如放大/缩小、滑动、旋转。
  • 自定义 marker 显示来指示点、信息窗口(InfoWindow),即使使用自定义 Overlay 也能够指示点。
  • 各种地图的样式。
  • 通过平移,并结合动画和 Flutter Widgets,能够实现定位更加详细地方案。

在加载地图时,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 添加地图功能非常简单,并且它提供的类库让您方便地自定义磁贴、覆盖物和地图样式,善加利用,将省去开发者的许多烦忧。