作为google_maps_flutter标记的网络图像

qncylg1j 于 2023-03-09 发布在 Flutter

关注(0)|答案(1)|浏览(135)

我正在尝试使用网络图像作为google_maps_flutter的标记。它一直向我显示默认的引脚保持器代替。

var markerbitmap;

getpicture() async {
    String imgurl =
    "http://domain/image.jpg";
    Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgurl)).load(imgurl))
    .buffer
    .asUint8List();
    setState(() {
        markerbitmap = BitmapDescriptor.fromBytes(bytes);
    });
}

@override
void initState() {
    getpicture();
}

_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
    MarkerId markerId = MarkerId(id);
    Marker marker =
    Marker(markerId: markerId, icon: descriptor, position: position);
    _markers[markerId] = marker;
}

void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    LatLng latLng_1 = LatLng(startCoordinatesLat, startCoordinatesLng);
    LatLng latLng_2 = LatLng(endCoordinatesLat, endCoordinatesLng);
    _markers.clear();
    _addMarker(
        latLng_1,
        "origin",
        markerbitmap ?? BitmapDescriptor.defaultMarker,
    );
    _addMarker(
        latLng_2,
        "destination",
        markerbitmap ?? BitmapDescriptor.defaultMarker,
    );
    _addMarker(
        LatLng(31.5096673920523, 74.37318230126559),
        "waypoint",
        markerbitmap ?? BitmapDescriptor.defaultMarker,
    );
    setState(() {
    });
}

GoogleMap(
    onMapCreated: _onMapCreated,
    initialCameraPosition: _kGooglePlex,
    mapType: MapType.normal,
    tiltGesturesEnabled: true,
    compassEnabled: true,
    scrollGesturesEnabled: true,
    zoomGesturesEnabled: true,
    polylines: Set < Polyline >.of(_polylines.values),
    markers: Set < Marker >.of(_markers.values),
    onCameraMove: _onCameraMove,
    myLocationButtonEnabled: false,
)

flutter

来源：https://stackoverflow.com/questions/75670658/network-image-as-marker-for-google-maps-flutter

1条答案

按热度按时间

pcww981p1#

我认为这里的问题是getpicture()是一个异步函数，您在initState中调用它，但是您创建GoogleMap小部件的build方法将在这个future完成之前运行**。
即使您在getpicture()获取网络映像之后调用setState，GoogleMap小部件也不会重新构建，因为在构建小部件时没有直接使用变量markerbitmap：它只在_onMapCreated函数中使用，该函数在创建GoogleMap后运行。
这就是发生的事情：

initState已调用
getpicture开始
1.调用build方法
1.构建GoogleMap小工具
_onMapCreated被调用
markerbitmap仍为空，因此使用默认标记
1....（异步间隙）
1.在一段时间之后，getpicture结束并且markerbitmap被设置，但是小部件已经被构建。
我会尝试使用FutureBuilder来获取网络映像，并仅在完成后构建GoogleMap。
将getpicture转换为未来功能：

Future <Uint8List>getpicture() async {
  String imgurl = "http://domain/image.jpg";
  Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgurl)).load(imgurl))
    .buffer
    .asUint8List();
    
  return bytes;
}

为将来创建一个状态类成员，并在initState中为其赋值：

late final Future <Uint8List> _getPictureFuture;

@override
void initState() {
  super.initState();
  _getPictureFuture = getpicture();
}

在FutureBuilder中使用future函数：

FutureBuilder<Uint8List>(
  future: _getPictureFuture,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      // here you have the data from the completed future
      markerbitmap = BitmapDescriptor.fromBytes(snapshot.data!);
      
      return GoogleMap(...);            
    }
    else if (snapshot.hasError) {
      // handle error
    }
    // display progress indicator
    return const Center(
        child: CircularProgressIndicator());
  });
)

赞(0）回复(0）举报 2023-03-09

我来回答

作为google_maps_flutter标记的网络图像

1条答案

相关问题

热门标签

最新问答