如何在缩放地图时保持地图标记图标的移动

Question

我在我的应用程序中使用flutter_map来显示带有标记的地图。问题是，当我缩放地图时，标记会移动，而不是停留在它们的位置上。每个标记周围都有一个CircleMarker，很快就会明显地发现它们没有正确居中（请参见下面的图像）。如何正确地固定标记图标，使其在缩放地图时不会移动？近距离标记：

缩小的标记：

进一步缩小视图的标记：

制作标记的代码：

  Marker marker = Marker(
  point:
      LatLng(alertLatitude, alertLongitude),
  width: 50,
  height: 50,
  anchorPos: AnchorPos.align(AnchorAlign.center),
  builder: (context) => Icon(
        Icons.location_on_sharp,
        size: 60,
        color: Color(aquarium),
      ));

制作FlutterMap的代码：

FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        center: determineMapStartLocation(),
        zoom: 14,
        plugins: [MarkerClusterPlugin()],
        onTap: (_, __) => _popupController.hideAllPopups(),
      ),
      layers: [
        TileLayerOptions(
          minZoom: 1,
          maxZoom: 20,
          backgroundColor: Colors.white,
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
        ),
        CircleLayerOptions(
          circles: alertCirclesList,
        ),
        MarkerClusterLayerOptions(
          maxClusterRadius: 190,
          disableClusteringAtZoom: 12,
          size: Size(90, 90),
          fitBoundsOptions: FitBoundsOptions(
            padding: EdgeInsets.all(50),
          ),
          markers: _alertMarkers,
          ...
        )]);

- usafutb0l3r

Answer 1

看起来你的对齐方式有问题

  Marker marker = Marker(
  point:
      LatLng(alertLatitude, alertLongitude),
  width: 50,
  height: 50,
  anchorPos: AnchorPos.align(AnchorAlign.bottom/*AnchorAlign.center*/), //change center to bottom
  builder: (context) => Icon(
        Icons.location_on_sharp,
        size: 60,
        color: Color(aquarium),
      ));

如果这不完全有效，我会尝试调整AnchorPos.exact(Anchor(left:x,right:y)) 直到看起来正确。

- HannesH

---

谢谢，到目前为止这是最好的答案。这确实有所帮助，但它们仍然会有一点滑动。我添加了anchorPos：AnchorPos.align（AnchorAlign.top） - usafutb0l3r

Answer 2

我尝试使用google_maps_flutter，希望它能有所帮助。

使用了带有位置参数的标记。

Marker(markerId: MarkerId((i).toString()),
  position: LatLng(double.parse(data[i].latitude ?? '0'), 
  double.parse(data[i].longitude ?? '0')));

- Mukund Jogi

---

谢谢您的帮助，但我目前幸运地使用开源的flutter_maps！ - usafutb0l3r