时间戳

首页 > 解决方案 > 在 Flutter 中，如何通过点击屏幕或单击按钮在 openstreetmap 上添加标记？

flutter - 在 Flutter 中，如何通过点击屏幕或单击按钮在 openstreetmap 上添加标记？

问题描述

它应该很简单，但我似乎无法找到如何去做。

在 Flutter / openstreetmap 中，我需要： (1) 通过点击地图和/或单击按钮在地图上放置标记；(2) 用一条线连接这些标记中的两个。

任何想法，将不胜感激。

标签： flutteropenstreetmapmarker

解决方案

1）添加标记：

List<Marker> markers = [];

内部构建方法：

          FlutterMap(
            mapController: _mapController,
            options: MapOptions(
                center: LatLng(41.238250, 69.342939),
                zoom: 9.6,
                onTap: (latlng) {
                  setState(() {
                    markers.add(
                      Marker(
                        width: 150.0,
                        height: 150.0,
                        point: latlng,
                        builder: (ctx) => const Icon(
                          Icons.location_on,
                          color: Colors.red,
                          size: 35.0,
                        ),
                      ),
                    );
                  });
                }),
            layers: [
              MarkerLayerOptions(
                markers: [
                  for (int i = 0; i < markers.length; i++) markers[i]
                ],
              ),
            ],
          ),

2）如果你想得到两点之间的路线，你可以使用这项服务，它是免费的。 http://project-osrm.org

我用来获取两点之间方向的链接。

https://api.openrouteservice.org/v2/directions/driving-car?api_key=$OSRM_API_KEY&start=${origin.longitude},${origin.latitude}&end=${destination.longitude},${destination.latitude }

它需要 API Key 和起点 lat-long 和终点 lat-long。

响应为您提供多个经纬度点，如果您将这些点提供给地图的 polyLine 参数，它将在两点之间为您绘制一条道路线

如果您需要对我的回答的某些部分进行任何澄清，请告诉我

推荐阅读