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

Question

这应该很简单，但我似乎找不到如何做。

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

任何想法都将不胜感激。

- kokserek

---

你想要获取两个点之间的道路方向，还是只想要直线连接两个点？ - undefined

我想要一条直线。最后，我希望让用户构建任意多边形并找到内部的标记点。 - undefined

Answer 1

1）添加标记：

List<Marker> markers = [];

在 Build 方法内部：

          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密钥和起点纬度-经度和终点纬度-经度。

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

如果您需要澄清我的回答的某个部分，请告诉我

- SardorbekR

---

是的，List<Marker> markers = []; 我更新了答案。 - undefined

是的，(1)有效！太棒了！我继续进行。我的任务是构建一个多边形/折线，并让用户在其中查看标记，就像我在这里写的那样：https://stackoverflow.com/questions/66374167/how-to-let-the-user-to-build-a-polygon-on-the-open-street-map - undefined

@kokserek 我还不知道该怎么处理它。 - undefined

Answer 2

在flutter_map 4.0.0的重大更改之后，@SardorbekR之前的答案可以修改如下：

FlutterMap(
            options: MapOptions(
              center: LatLng(50, 50),
              onTap: (tapPos, latlng) {
                setState(() {
                  markers.add(
                    Marker(
                      width: 100.0,
                      height: 100.0,
                      point: latlng,
                      builder: (ctx) => const Icon(
                        Icons.location_on,
                        color: Colors.red,
                        size: 35.0,
                      ),
                    ),
                  );
                });
              },
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'com.example.app',
              ),
              MarkerLayer(
                markers: [for (int i = 0; i < markers.length; i++) markers[i]],
              )
            ],
          ),

- Betelmoose

---

请注意，此代码实际上适用于flutter_map 3.0.0+版本。有关迁移信息，请参阅https://docs.fleaflet.dev/v/v3/migration/to-v3.0.0。 - undefined