地图组件

地图组件用于集成地图功能，包括显示地图、添加标记、定位等。

提示：使用地图组件需要申请相应的 API 密钥和配置平台权限。

📱 渲染效果预览

📍

Google Maps

Google Maps 提供完整的地图功能和丰富的 API。

import 'package:google_maps_flutter/google_maps_flutter.dart';

class MyMap extends StatefulWidget {
  @override
  _MyMapState createState() => _MyMapState();
}

class _MyMapState extends State {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),
      markers: {
        Marker(
          markerId: MarkerId('marker_1'),
          position: _center,
          infoWindow: InfoWindow(
            title: 'Portland',
            snippet: 'Oregon, USA',
          ),
        ),
      },
    );
  }
}

📱 渲染效果预览

📍

flutter_map

flutter_map 是一个开源的地图库，基于 Leaflet。

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

FlutterMap(
  options: MapOptions(
    center: LatLng(51.5, -0.09),
    zoom: 13.0,
  ),
  children: [
    TileLayer(
      urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      subdomains: ['a', 'b', 'c'],
    ),
    MarkerLayer(
      markers: [
        Marker(
          width: 80.0,
          height: 80.0,
          point: LatLng(51.5, -0.09),
          builder: (ctx) => Container(
            child: FlutterLogo(),
          ),
        ),
      ],
    ),
  ],
)

Mapbox

Mapbox 提供高度可定制的地图解决方案。

import 'package:mapbox_gl/mapbox_gl.dart';

MapboxMap(
  accessToken: 'YOUR_ACCESS_TOKEN',
  initialCameraPosition: CameraPosition(
    target: LatLng(45.521563, -122.677433),
    zoom: 11.0,
  ),
  styleString: MapboxStyles.MAPBOX_STREETS,
  onMapCreated: _onMapCreated,
  onStyleLoadedCallback: _onStyleLoaded,
)

📱 渲染效果预览

📍

39.9042° N

纬度

📍

116.4074° E

经度

📏

1.2 km

距离

Geolocator

Geolocator 用于获取设备位置信息。

import 'package:geolocator/geolocator.dart';

// 检查位置权限
LocationPermission permission = await Geolocator.checkPermission();
if (permission == LocationPermission.denied) {
  permission = await Geolocator.requestPermission();
}

// 获取当前位置
Position position = await Geolocator.getCurrentPosition(
  desiredAccuracy: LocationAccuracy.high,
);

// 监听位置变化
StreamSubscription positionStream = 
    Geolocator.getPositionStream().listen((Position position) {
  print(position.latitude);
  print(position.longitude);
});

// 计算距离
double distanceInMeters = Geolocator.distanceBetween(
  startLatitude, startLongitude,
  endLatitude, endLongitude,
);

📱 渲染效果预览

Gronausestraat 710, Enschede

→

52.2165157, 6.9437893

→

Gronausestraat 710, Enschede

Geocoding

Geocoding 用于地址和坐标之间的转换。

import 'package:geocoding/geocoding.dart';

// 地址转坐标
List locations = await locationFromAddress('Gronausestraat 710, Enschede');

// 坐标转地址
List placemarks = await placemarkFromCoordinates(52.2165157, 6.9437893);

// 获取详细信息
Placemark place = placemarks[0];
print('${place.street}, ${place.locality}, ${place.postalCode}');

地图组件选择：

Google Maps: 功能全面、API 丰富
flutter_map: 开源免费、基于 Leaflet
Mapbox: 高度可定制、样式灵活

注意事项：

需要申请 API 密钥
配置平台权限（Android/iOS）
注意 API 使用配额和费用
测试时使用调试密钥

← 图表组件