如何在顫動的谷歌地圖中從互聯網上獲取標記圖標

Question

我在互聯網上有一些圖標，我想將這些圖標設置為顫振谷歌標記，我該怎么做？

一種方法是從互聯網上獲取圖像並將其轉換為字節數據，然后 Uint8List 最終使用 BitmapDescriptor.fromBytes 將其設置在標記上

我這樣做但不工作

有人可以幫忙嗎？

Answer 1

您可以使用“BitmapDescriptor.fromBytes”來顯示圖標。 根據下面的例子

      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

如果要顯示多個圖像，可以使用此方法。

首次導入

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

現在像這樣初始化谷歌地圖

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,
        ),