Flutter如何在圆形内显示标记？flutter_map

Question

Flutter的新手。如何在flutter_map中显示圆形标记。我已经尝试了多天来解决这个问题。我无法使半径内的标记改变，也无法改变颜色。以下是我已经实现的部分:

Position _currentPosition;
  static final List<LatLng> _points = [
    LatLng(55.749122, 37.659750),
    LatLng(55.770854, 37.626963),
    LatLng(55.776937, 37.637949),
    LatLng(55.739266, 37.637434),
  ];

  static const _markerSize = 40.0;
  List<Marker> _markers;
  List<CircleMarker> circle;

  @override
  void initState() {
    super.initState();

    _markers = _points
        .map(
          (LatLng point) => Marker(
        point: point,
        width: _markerSize,
        height: _markerSize,
        builder: (_) => Icon(Icons.location_on, size: _markerSize),
      ),
    ).toList();

    _getCurrentLocation();
  }

  _getCurrentLocation() {
    geolocator
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.best)
        .then((Position position) {
      setState(() {
        _currentPosition = position;
      });

    }).catchError((e) {
      print(e);
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: new MapOptions(
          minZoom: 16.0,
          center:  new LatLng(_currentPosition.latitude,_currentPosition.longitude)),
      layers: [new TileLayerOptions(urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a','b','c']),
        new MarkerLayerOptions(
            markers: [
              new Marker(
                  width: 45.0,
                  height: 45.0,
                  point: new LatLng(_currentPosition.latitude,_currentPosition.longitude),
                  builder: (context)=>new Container(
                    child: IconButton(icon: Icon(Icons.accessibility), onPressed: () {print('Marker tapped!');}),
                  ))]),
      MarkerLayerOptions(markers: _markers),
      CircleLayerOptions(circles: [ CircleMarker(
          point: LatLng(_currentPosition.latitude,_currentPosition.longitude),
          color: Colors.blue.withOpacity(0.7),
          borderStrokeWidth: 2,
          useRadiusInMeter: true,
          radius: 2000 // 2000 meters | 2 km
      )]),
    ],
    );
  }

如何更改蓝色圆圈中的标记。例如，如何更改标记图标？

我的结果 - （这是图片）

- Вася Пупкин

Answer 1

你尝试更改标记的构建工具了吗，比如：

_markers = _points
    .map(
      (LatLng point) => Marker(
    point: point,
    width: _markerSize,
    height: _markerSize,
    builder: (_) => Icon(
       Icons.location_city,
       size: _markerSize,
       color: Colors.red,
    ),
  ),
).toList();

- bananagag

Answer 2

首先，您需要找到圆内的点。您可以使用前面提到的类似于这里的东西：

  
static double getDistanceFromGPSPointsInRoute(List<LatLng> gpsList) {
    double totalDistance = 0.0;

    for (var i = 0; i < gpsList.length; i++) {
      var p = 0.017453292519943295;
      var c = cos;
      var a = 0.5 -
          c((gpsList[i + 1].latitude - gpsList[i].latitude) * p) / 2 +
          c(gpsList[i].latitude * p) *
              c(gpsList[i + 1].latitude * p) *
              (1 - c((gpsList[i + 1].longitude - gpsList[i].longitude) * p)) /
              2;
      double distance = 12742 * asin(sqrt(a));
      totalDistance += distance;
      print('Distance is ${12742 * asin(sqrt(a))}');
    }
    print('Total distance is $totalDistance');
    return totalDistance;
  }

然后您需要使用布尔字段在点内签名。

 static final List<NewModel> _points = []; // NewModel contains boolean field with LatLng

之后，您可以像这样轻松自定义内部点的图标：

_markers = _points
        .map(
          (NewModel newModel) => Marker(
        point: newModel.point,
        width: _markerSize,
        height: _markerSize,
        builder: (_) => 
                 newModel.isInside
              ? Icon(Icons.location_city, size: _markerSize),
              : Icon(Icons.location_on, size: _markerSize),
      ),
    ).toList();

- Akif

Answer 3

1- 你可以在容器中使用装饰：

      new Marker(
          width: 45.0,
          height: 45.0,
          point: new LatLng(_currentPosition.latitude,_currentPosition.longitude),
          builder: (context)=> new Container(
             decoration: BoxDecoration(
               color: Colors.blue,
               borderRadius: BorderRadius.circular(20),
            ),
            child: IconButton(
               icon: Icon(Icons.accessibility, color: Colors.white),
               onPressed: () {print('Marker tapped!');},
            ),
        )

---

2- 或者您可以从图片创建自定义标记：

import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
...
Future<BitmapDescriptor> createMarkIcon(assetsPath, size) async {
  ByteData data = await rootBundle.load(assetsPath);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
      targetWidth: size);
  ui.FrameInfo fi = await codec.getNextFrame();
  return BitmapDescriptor.fromBytes(
    (await fi.image.toByteData(format: ui.ImageByteFormat.png))
        .buffer
        .asUint8List(),
  );
}

...

 BitmapDescriptor _markIcon =
      await createMarkIcon('assets/images/marker_icon.png', 60);

Marker _marker = Marker(
          position: _latlng,
          icon: _markIcon,
          onTap: () {
            // your code
          });

- Mohammad Shamsi

---

你没有理解我的意思。需要更改的不是位置标记，而是在蓝色圆圈内部的标记。 - Вася Пупкин