dart Flutter网络图像作为GoogleMap标记

cwxwcias  于 2023-07-31  发布在  Flutter
关注(0)|答案(3)|浏览(133)

我想添加一个网络图像作为谷歌Map上的标记,我在屏幕上。API支持一个函数Bitmapdescriptor.fromBytes()。但是,我不知道如何使用它与网络图像。

BitmapDescriptor.fromBytes(byteData);

字符串

y0u0uwnf

y0u0uwnf1#

首先导入:-

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

dsf9zpds

dsf9zpds2#

如果要显示多个图像,可以使用此方法。
首次导入

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

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

q5lcpyga

q5lcpyga3#

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

字符串

相关问题