Как настроить значок маркера Google Maps во флаттере - PullRequest
Новая
       44

Как настроить значок маркера Google Maps во флаттере

0 голосов
/ 14 июня 2019

Я использую google_maps_flutter в своем приложении флаттера для использования карты Google. У меня есть пользовательский значок маркера, и я загружаю его с помощью BitmapDescriptor.fromBytes (markerIcon), но я хочу показать значок из Url с некоторым текстом. вот мой код трепетания: 

Map<MarkerId, Marker> markers =
  <MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS

void _add([center]) async {


for (int i = 0; i < sallersList.length; i++) {
  if (sallersList[i]["uID"] != currentUser.uid) {
    /*var request = await http.get(sallersList[i]["user_image"]);
    var bytes = await request.bodyBytes;*/

     final Uint8List markerIcon = await getBytesFromCanvas(150,         150);

    var markerIdVal = sallersList[i]["uID"];
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(
          sallersList[i]["latitude"], //+ sin(1 * pi / 6.0) / 20.0,
          sallersList[i]["longitude"] //+ cos(1 * pi / 6.0) / 20.0,
          ),
      // icon: BitmapDescriptor.fromBytes(bytes.buffer.asUint8List(),),
      icon: BitmapDescriptor.fromBytes(markerIcon),
      infoWindow: InfoWindow(
          title: sallersList[i]["user_name"],
          snippet: sallersList[i]["address"]),
      onTap: () {
       // print(sallersList[i]["uID"]);

        Navigator.of(context).push(new MaterialPageRoute(
            builder: (BuildContext context) =>
            new DirectDetails()));
      },
    );
    if (this.mounted)
      setState(() {
        // adding a new marker to map
        markers[markerId] = marker;
      });
  }
}
}


Future<Uint8List> getBytesFromCanvas(int width, int height) async  {
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final Paint paint = Paint()..color = Colors.blue;
final Radius radius = Radius.circular(width/2);
canvas.drawRRect(
    RRect.fromRectAndCorners(
      Rect.fromLTWH(0.0, 0.0, width.toDouble(),  height.toDouble()),
      topLeft: radius,
      topRight: radius,
      bottomLeft: radius,
      bottomRight: radius,
    ),
    paint);

TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
painter.text = TextSpan(
  text: '1',
  style: TextStyle(fontSize: 65.0, color: Colors.white),
);

painter.layout();
painter.paint(
    canvas,
    Offset((width * 0.5) - painter.width * 0.5,
        (height * .5) - painter.height * 0.5));
final img = await pictureRecorder.endRecording().toImage(width, height);
final data = await img.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();
}

Это то, чего мы хотим достичь

Our end requirement

Это то, чего я могу достичь. My Try

Можно ли добиться того же с помощью флаттера или любой зависимости от внешнего изображения, которая может создавать изображения на лету.

1 Ответ

0 голосов
/ 18 июня 2019
  1. использует пакет изображений, https://pub.dev/packages/image, как im
  2. скачать изображение File f = await _downloadFile (url, "border"); im.Image img = im.decodeImage (f.readAsBytesSync ());
  3. используйте drawString (), чтобы написать число
  4. BitmapDescriptor.fromBytes (im.encodePng (IMG))

static var httpClient = new HttpClient (); 

Future<File> _downloadFile(String url, String filename) async {
    var request = await httpClient.getUrl(Uri.parse(url));
    var response = await request.close();
    var bytes = await consolidateHttpClientResponseBytes(response);
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = new File('$dir/$filename');
    await file.writeAsBytes(bytes);
    return file;
  }
...