我想添加一个网络图像作为谷歌Map上的标记,我在屏幕上。API支持一个函数Bitmapdescriptor.fromBytes()。但是,我不知道如何使用它与网络图像。
Bitmapdescriptor.fromBytes()
BitmapDescriptor.fromBytes(byteData);
字符串
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", ), ));
型
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, ),
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));
3条答案
按热度按时间y0u0uwnf1#
首先导入:-
字符串
主编码:-
型
dsf9zpds2#
如果要显示多个图像,可以使用此方法。
首次导入
字符串
现在像这样初始化GoogleMap
型
q5lcpyga3#
字符串