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

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
          });

Answer 2

다음과 같이 마커 빌더를 변경해 보셨습니까?

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

Answer 3

먼저 원 안의 점을 찾아야합니다. 당신은 언급하기 전에이 같은 것을 사용할 수 있습니다 여기에 :

  
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();