स्पंदन कैसे चक्र में मार्कर दिखाते हैं? flutter_map

Question

नौसिखिया में स्पंदन। फ़्लटर_मैप में सर्कल में मार्कर कैसे दिखाएं। जो पहले से ही इस समस्या को हल करने की कोशिश कर रहा है। मैं त्रिज्या परिवर्तन में मार्कर नहीं बना सकता, या सिर्फ रंग बदल सकता हूं। यही मैंने हासिल किया है:

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