Flutter网络图片用作Google地图标记

Question

我希望在屏幕上的谷歌地图上添加一个网络图片作为标记。 API 支持函数Bitmapdescriptor.fromBytes()。但是，我不知道如何将其用于网络图片。

BitmapDescriptor.fromBytes(byteData);

- Hussain Mustafa

Answer 1

首先要导入这个：

              import 'package:http/http.dart' as http;

主要代码 :-

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

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

              LatLng _lastMapPositionPoints = LatLng(
                  double.parse("22.7339"),
                  double.parse("75.8499"));

                _markers.add(Marker(
                  icon: BitmapDescriptor.fromBytes(dataBytes.buffer.asUint8List()),
                  markerId: MarkerId(_lastMapPositionPoints.toString()),
                  position: _lastMapPositionPoints,
                  infoWindow: InfoWindow(
                    title: "Delivery Point",
                    snippet:
                    "My Position",
                  ),
                ));

- user10253151

---

最好的地方在哪里调用异步函数？ - undefined

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

现在像这样初始化Google地图

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

- Shailandra Rajput

Answer 3

final response = await HttpClient().getUrl(Uri.parse(url));
final bytes = await response.close().then((response) =>
    response.fold<Uint8List>(Uint8List(0),
            (previous, current) => Uint8List.fromList(previous + current)));
return BitmapDescriptor.fromBytes(bytes, size: const Size(5, 5));

- Kamla Saad