flutter_osm_plugin

适用于 Flutter 应用的 OSM 插件 (目前仅限 Android，iOS 将在未来支持)

  • 当前位置
  • 更改位置
  • 跟踪用户位置
  • 自定义图标标记
  • 辅助位置选择
  • 绘制路线，获取当前路线的（时长/距离）信息
  • 标记上的点击监听器
  • 计算两点之间的距离
  • 地址建议
  • 绘制形状
  • 简单的对话框位置选择器

入门

osm

searchExample

dialogSimplePickerLocation

安装

将以下内容添加到您的 pubspec.yaml 文件中

dependencies:
  flutter_osm_plugin: ^0.7.5

简单用法

创建基本的OSMFlutter

 OSMFlutter( 
        controler:mapController,
        currentLocation: false,
        road: Road(
                startIcon: MarkerIcon(
                  icon: Icon(
                    Icons.person,
                    size: 64,
                    color: Colors.brown,
                  ),
                ),
                roadColor: Colors.yellowAccent,
        ),
        markerIcon: MarkerIcon(
        icon: Icon(
          Icons.person_pin_circle,
          color: Colors.blue,
          size: 56,
          ),
        ),
        initPosition: GeoPoint(latitude: 47.35387, longitude: 8.43609),
    );

MapController

声明MapController来控制OSM地图

1) 初始化

 MapController controller = MapController(
                            initMapWithUserPosition: false,
                            initPosition: GeoPoint(latitude: 47.4358055, longitude: 8.4737324),
                       );

2) 销毁

     controller.dispose();

3) MapController的属性

属性 描述
initMapWithUserPosition (布尔值) 用用户位置初始化地图（默认：true）
initPosition (GeoPoint) 如果不为null，地图将指向此位置

4) 将地图设置到用户当前位置

 await controller.currentPosition();

5) 放大

 await controller.zoom(2.);
 // or 
 await controller.zoomIn();

6) 缩小

 await controller.zoom(-2.);
 // or 
 await controller.zoomOut();

7) 跟踪用户当前位置

 await controller.enableTracking();

8) 禁用跟踪用户位置

 await controller.disabledTracking();

9) 更新位置

此方法将在该特定位置创建标记

 await controller.changeLocation(GeoPoint(latitude: 47.35387, longitude: 8.43609));

在不创建标记的情况下更改位置

 await controller.goToLocation(GeoPoint(latitude: 47.35387, longitude: 8.43609));

10) 获取当前位置

 GeoPoint geoPoint = await controller.myLocation();

11) 选择/创建新位置

  • 我们有两种方式可以在地图上选择位置

11.1 手动选择

 GeoPoint geoPoint = await controller.selectPosition();

11.2 辅助选择 （更多详情请参阅示例）

 /// To Start assisted Selection
 await controller.advancedPositionPicker();
 /// To get location desired
  GeoPoint p = await controller.getCurrentPositionAdvancedPositionPicker();
  /// To get location desired and close picker
 GeoPoint p = await controller.selectAdvancedPositionPicker();
 /// To cancel assisted Selection
 await controller.cancelAdvancedPositionPicker();
  • 附注：选定的位置可以通过长按移除

12) 移除标记

 await controller.removePosition(geoPoint);
  • 附注：静态位置无法通过此方法移除

13) 绘制路线，获取距离（千米）和时长（秒）

 RoadInfo roadInfo = await controller.drawRoad( 
   GeoPoint(latitude: 47.35387, longitude: 8.43609),
   GeoPoint(latitude: 47.4371, longitude: 8.6136),
   roadColor : Colors.green,
   roadWidth : 7.0,
);
 print("${roadInfo.distance}km");
 print("${roadInfo.duration}sec");

14) 删除最后一条路线

 await controller.removeLastRoad();

15) 更改静态GeoPoint位置

如果您一开始没有静态位置，并且需要添加一个带有空GeoPoints列表的静态点，则可以使用它
您可以使用它来随时间更改它们的位置

 await controller.setStaticPosition(List<GeoPoint> geoPoints,String id );

16) 更改地图方向

 await controller.rotateMapCamera(degree);

17) 在地图上绘制形状

  • 圆形
 /// to draw
 await controller.drawCircle(CircleOSM(
              key: "circle0",
              centerPoint: GeoPoint(latitude: 47.4333594, longitude: 8.4680184),
              radius: 1200.0,
              color: Colors.red,
              strokeWidth: 0.3,
            ));
 /// to remove Circle using Key
 await controller.removeCircle("circle0");

 /// to remove All Circle in the map 
 await controller.removeAllCircle();
  • 矩形
 /// to draw
 await controller.drawRect(RectOSM(
              key: "rect",
              centerPoint: GeoPoint(latitude: 47.4333594, longitude: 8.4680184),
              distance: 1200.0,
              color: Colors.red,
              strokeWidth: 0.3,
            ));
 /// to remove Rect using Key
 await controller.removeRect("rect");

 /// to remove All Rect in the map 
 await controller.removeAllRect();
  • 移除地图上的所有形状
 await controller.removeAllShapes();

OSMFlutter

属性 描述
trackMyPosition 启用跟踪用户位置。
showZoomController 显示默认缩放控制器。
markerIcon 设置标记图标
defaultZoom 设置用于zoomIn()/zoomOut()的默认缩放级别（默认为1）
road 设置路线的颜色以及起点/终点/中间标记
useSecureURL 启用安全URL
staticPoints 您想始终显示的标记列表，每个标记都应该有一个唯一的ID
onGeoPointClicked (回调) 点击标记时触发的监听器，返回标记的当前地理点
onLocationChanged (回调) 当您激活跟踪并且用户位置发生变化时，会调用此函数
showDefaultInfoWindow (布尔值) 启用/禁用标记的默认信息窗口（默认=false）
isPicker (布尔值) 从地图初始化时启用高级选择器（默认=false）

静态方法

1) 计算两个地理点位置之间的距离

 double distanceEnMetres = await distance2point(GeoPoint(longitude: 36.84612143139903,latitude: 11.099388684927824,),
        GeoPoint( longitude: 36.8388023164018, latitude: 11.096959785428027, ),);

2) 获取文本的搜索建议

您应该知道我使用的是公共API，请不要发起过多的请求

    List<SearchInfo> suggestions = await addressSuggestion("address");

显示对话框选择器

简单的对话框位置选择器，用于选择用户位置

GeoPoint p = await showSimplePickerLocation(
                      context: context,
                      isDismissible: true,
                      title: "Title dialog",
                      textConfirmPicker: "pick",
                      initCurrentUserPosition: true,
                    )

CustomLocationPicker

可自定义的小部件，用于构建搜索位置

您应该使用PickerMapController作为该小部件的控制器
请参阅示例：搜索小部件

CustomLocationPicker的属性

属性 描述
控制器 (PickerMapController) 小部件的控制器
appBarPicker (AppBar) 小部件的应用程序栏
topWidgetPicker (Widget?) 将显示在OSM地图顶部的Widget，例如用于显示地址建议
bottomWidgetPicker (Widget?) 将显示在屏幕底部的Widget，例如用于显示有关所选位置的更多详细信息或更多操作

注意

目前地图仅适用于Android，iOS版本即将推出

如果您遇到SSL证书异常，您可以使用HTTP，请遵循以下说明

如果您想在Android PIE或更高版本中使用HTTP

  • 启用useSecureURL并按照以下示例在您的清单文件中添加android:usesCleartextTraffic="true"

    • <application ... android:usesCleartextTraffic="true">

如果您在一个新的项目中遇到构建错误，则需要遵循此说明 [#40]

1) remove flutter_osm_plugin from pubspec, after that pub get
2) open android module in android studio ( right click in name of project -> flutter-> open android module in android studio)
3) update gradle version to 4.1.1 ( IDE will show popup to make update)
4) update kotlin version to 1.4.21 & re-build the project
5) re-add flutter_osm_plugin in pubspec , pub get ( or flutter clean & pub get )

GitHub

https://github.com/liodali/osm_flutter