Flutter地图功能增强插件easy_maps_plus的使用

Flutter地图功能增强插件easy_maps_plus的使用

安装

要使用EasyMapPlus，你需要将该包添加到你的pubspec.yaml文件中：

dependencies:
  easy_map_plus: 0.1.9

然后运行flutter pub get来获取该包。

使用

要使用EasyMap组件，只需导入该包并将其包含在你的Flutter应用中。以下是一个使用示例：

import 'package:flutter/material.dart';
import 'package:easy_map_plus/easy_map_plus.dart';

void main() {
  // 初始化EasyMap组件，传入你的Location IQ API密钥
  EasyMap.init(API_KEY);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EasyMapPlus'),
        ),
        body: EasyMap(
          coordinates: [
            LatLng(37.7749, -122.4194), // 起点
            LatLng(34.0522, -118.2437), // 终点
            // 根据需要添加更多的途经点
          ],
          onMapCreated: (GoogleMapController controller) {
            // 当GoogleMapController准备好时调用的回调函数
          },
          destinationIcon: BitmapDescriptor.hueBlue, // 默认为BitmapDescriptor.hueRed
          polylinesColor: Colors.blue,
          mapType: MapType.normal,
          showMarkers: true,
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 15,
          ), // 如果未提供，则默认为坐标列表中的第一个坐标，缩放级别为15
          cameraTargetBounds: const CameraTargetBounds(null),
        ),
      ),
    );
  }
}

组件属性

EasyMap组件支持以下属性：

  • apiKey（必需）：你的Location IQ API密钥。你可以从官方网站获取。
  • coordinates（必需）：一个包含LatLng对象的列表，表示驾驶方向的途经点。第一个和最后一个坐标将被视为起点和终点。
  • onMapCreated（必需）：当GoogleMapController准备好使用时调用的回调函数。
  • polylinesColor（必需）：绘制在地图上的折线的颜色。
  • destinationIcon：目的地标记的颜色色调。
  • originIcon：起点标记的颜色色调。
  • initialCameraPosition：地图的初始相机位置。如果没有提供，则默认为坐标列表中的第一个坐标，缩放级别为15。
  • mapType：显示的地图类型（例如，normal, satellite, terrain等）。默认为MapType.normal。
  • showMarkers：一个布尔值，指示是否显示起点和终点的标记。默认为true。

额外信息

  • DrivingDirections类用于从Google Maps获取驾驶方向。它会解码响应并提取必要的坐标以在地图上绘制折线。

  • 使用Location IQ API查找地点的方法：

    await EasyMap.findPlaces('巴黎');

    这个方法可以用来使用Location IQ API查找地点。它返回一个包含找到地点信息的ForwardGeo对象列表。

  • 使用Location IQ API查找地址的方法：

    await EasyMap.findInfos(lat: '48.8566', long: '0.3522');

更多关于Flutter地图功能增强插件easy_maps_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图功能增强插件easy_maps_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用easy_maps_plus插件来增强地图功能的代码案例。这个插件提供了一些额外的功能，比如自定义标记、聚簇标记、信息窗口等。

首先，你需要在pubspec.yaml文件中添加easy_maps_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_maps_plus: ^最新版本号 # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来是一个简单的示例代码，展示如何使用easy_maps_plus来显示地图并添加一些自定义标记：

import 'package:flutter/material.dart';
import 'package:easy_maps_plus/easy_maps_plus.dart';
import 'package:geolocator/geolocator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController _controller;
  late Position _currentPosition;

  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
  }

  Future<void> _getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    // Test if location services are enabled.
    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return Future.error('Location services are disabled.');
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return Future.error('Location permissions are denied');
      }
    }
    if (permission == LocationPermission.deniedForever) {
      return Future.error(
          'Location permissions are permanently denied, we cannot request permissions.');
    }

    _currentPosition = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('easy_maps_plus Demo'),
      ),
      body: EasyMapsPlus(
        apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // 请替换为你的Google Maps API Key
        mapType: MapType.normal,
        myLocationEnabled: true,
        zoomGesturesEnabled: true,
        scrollGesturesEnabled: true,
        rotateGesturesEnabled: true,
        tiltGesturesEnabled: true,
        initialCameraPosition: CameraPosition(
          target: LatLng(_currentPosition.latitude, _currentPosition.longitude),
          zoom: 14.0,
        ),
        onMapCreated: (controller) {
          _controller = controller;
          _addMarkers();
        },
      ),
    );
  }

  void _addMarkers() {
    final marker1 = Marker(
      markerId: MarkerId('marker1'),
      position: LatLng(_currentPosition.latitude, _currentPosition.longitude),
      infoWindow: InfoWindow(
        title: 'Current Location',
        snippet: 'This is where you are now!',
      ),
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueAzure),
    );

    final marker2 = Marker(
      markerId: MarkerId('marker2'),
      position: LatLng(_currentPosition.latitude + 0.01, _currentPosition.longitude + 0.01),
      infoWindow: InfoWindow(
        title: 'Nearby Place',
        snippet: 'Just near your current location!',
      ),
      icon: BitmapDescriptor.defaultMarker,
    );

    _controller.addMarkers([marker1, marker2]);
  }
}

在这个示例中，我们做了以下几件事：

  1. 使用Geolocator插件获取当前位置。
  2. 使用EasyMapsPlus小部件显示地图，并设置一些初始配置，比如地图类型、是否启用我的位置、各种手势等。
  3. 在地图创建完成后，通过onMapCreated回调获取GoogleMapController实例，并使用它来添加标记。

请确保你已经替换了YOUR_GOOGLE_MAPS_API_KEY为你的实际Google Maps API Key。

easy_maps_plus还提供了更多高级功能，比如聚簇标记、自定义信息窗口等，你可以参考其官方文档来获取更多信息和示例代码。

回到顶部