0

我使用 sfmaps 插件覆盖多个地图图块，但我想添加一个标记，用于显示位置并在设备位置更改时动态更改位置。我已经使用标记来绘制路线。

我不能在一个 MapTileLayer 中放置 2 个标记并跟踪当前位置。

怎么做？

这是我的代码：


import 'package:flutter/material.dart';
import 'package:navizfront/src/data/models/user_location_model.dart';
import 'package:navizfront/src/data/services/geolocation_service.dart';
import 'package:syncfusion_flutter_maps/maps.dart';



class MapView extends StatefulWidget {
  const MapView({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {

  late List<MapLatLng> polylinePoints;

  @override
  void initState() {
 
    polylinePoints = [
      MapLatLng(43.11530920069449, 5.933847321082877),
      MapLatLng(43.115261054447515, 5.929955942235698),
      MapLatLng(43.11078328790601, 5.919996650609866),
      MapLatLng(43.090219874511284, 5.918545627963981),
      MapLatLng(43.0925799610869, 5.934671765752776),
      MapLatLng(43.08858220973042, 5.96504430756706),
      MapLatLng(43.089599529170826, 5.96937366430741),
      MapLatLng(43.07436555855097, 5.983248750601318),
      MapLatLng(43.04579576940066, 6.042443112262576),
      MapLatLng(43.010541904963965, 6.122069930874775),
      MapLatLng(43.013699826556994, 6.160343124591151),
      MapLatLng(43.01587760895141, 6.18193695013048),
      MapLatLng(43.00906433023288, 6.194657581312996),
      MapLatLng(43.00394697581921, 6.198069366778356),
      MapLatLng(43.00328301244045, 6.199697341166668),
    ];
    super.initState();
  }

 @override
  Widget build(BuildContext context) {
    final _zoomPanBehavior = MapZoomPanBehavior(
      zoomLevel: 14,
      focalLatLng: MapLatLng(userLocation.latitude!, userLocation.longitude!),
    );
    return Scaffold(
          body: SfMaps(
          layers: [
            MapTileLayer(
              initialFocalLatLng: MapLatLng(userLocation.latitude!, userLocation.longitude!),
              urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
              zoomPanBehavior: _zoomPanBehavior,
              sublayers: [
              MapPolylineLayer(
                polylines: {MapPolyline(
                  points: polylinePoints,
                )},
              ),
            ],
            initialMarkersCount: 2,
            markerBuilder: (context, index) {
              if (index == 0) {
                return MapMarker(
                    iconColor: Colors.white,
                    iconStrokeColor: Colors.blue,
                    iconStrokeWidth: 2,
                    latitude: polylinePoints[index].latitude,
                    longitude: polylinePoints[index].longitude);
              }
              return MapMarker(
                  iconColor: Colors.white,
                  iconStrokeColor: Colors.blue,
                  iconStrokeWidth: 2,
                  latitude: polylinePoints[polylinePoints.length - 1].latitude,
                  longitude: polylinePoints[polylinePoints.length - 1].longitude);
            },
          ),
            MapTileLayer(
                  urlTemplate:
                      'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
                  zoomPanBehavior: _zoomPanBehavior,
                  ),
          
          ],
          
        ));
        
  }
 

}
4

1 回答 1

-1

您可以找到以下文章来参考有关使用 Flutter Maps 动态更新标记的信息。 https://www.syncfusion.com/kb/13025/how-to-update-the-markers-dynamically-using-flutter-maps

于 2022-02-09T15:49:39.097 回答