如何在颤动的谷歌地图中从互联网上获取标记图标

Question

I have some icon on the internet, and I want to set those icons for flutter google marker, how can I do that?

One way is that get the image from the internet and convert it to byte data and Uint8List finally set it on the marker with BitmapDescriptor.fromBytes

I do that but not work

someone can help?

Answer 1

You can use 'BitmapDescriptor.fromBytes' to display icons. According to the example below

      var iconurl ='your url';
      var dataBytes;
      var request = await http.get(iconurl);
      var bytes = request.bodyBytes;

      setState(() {
        dataBytes = bytes;
      });

      final Marker marker = Marker(
        markerId: markerId,
        icon: BitmapDescriptor.fromBytes(dataBytes.buffer.asUint8List()),
        position: LatLng(
          lat,
          lng,
        ),
        infoWindow: InfoWindow(title: address, snippet: desc),
      );

Answer 2

You can use this approach if you want to show multiple images.

First Import

import 'dart:ui' as ui;


GoogleMapController controller;
  BitmapDescriptor _markerIcon;
  final LatLng _kMapCenter = const LatLng(25.2744, 133.7751);
  final List<Marker> _marker = <Marker>[];
  @override
  void initState() {
    loadData();
    super.initState();
  }

  loadData() async {
    for (var element in AppConstant.list) {
      Uint8List image = await loadNetworkImage(element['url']);
      final ui.Codec markerImageCodec = await ui.instantiateImageCodec(
          image.buffer.asUint8List(),
          targetHeight: 150,
          targetWidth: 150);
      final ui.FrameInfo frameInfo = await markerImageCodec.getNextFrame();
      final ByteData byteData =
          await frameInfo.image.toByteData(format: ui.ImageByteFormat.png);
      final Uint8List resizedImageMarker = byteData.buffer.asUint8List();

      _marker.add(Marker(
          markerId: MarkerId(element['id']),
          icon: BitmapDescriptor.fromBytes(resizedImageMarker),
          position: LatLng(
            element['lat'],
            element['lon'],
          ),
          infoWindow: InfoWindow(title: element["title"])));
    }
    setState(() {});
  }

  Future<Uint8List> loadNetworkImage(path) async {
    final completed = Completer<ImageInfo>();
    var image = NetworkImage(path);
    image.resolve(const ImageConfiguration()).addListener(
        ImageStreamListener((info, _) => completed.complete(info)));
    final imageInfo = await completed.future;
    final byteData =
        await imageInfo.image.toByteData(format: ui.ImageByteFormat.png);
    return byteData.buffer.asUint8List();
  }

  void _onMapCreated(GoogleMapController controllerParam) {
    setState(() {
      controller = controllerParam;
    });
  }

Now Initialise Google Map like this

GoogleMap(
          myLocationEnabled: true,
          zoomGesturesEnabled: true,
          buildingsEnabled: true,
          cameraTargetBounds: CameraTargetBounds.unbounded,
          compassEnabled: true,
          scrollGesturesEnabled: true,
          rotateGesturesEnabled: true,
          tiltGesturesEnabled: true,
          zoomControlsEnabled: true,
          minMaxZoomPreference: MinMaxZoomPreference.unbounded,
          gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
            Factory<OneSequenceGestureRecognizer>(
              () => EagerGestureRecognizer(),
            ),
          },
          initialCameraPosition: CameraPosition(
            target: _kMapCenter,
            zoom: 2.0,
          ),
          markers: Set.from(_marker),
          onMapCreated: _onMapCreated,
        ),