0

我在这个问题上挣扎了第二天。

我使用颤振谷歌地图显示大约一百个带有网络图像图标的自定义标记，可以是 svg 或 png（使用MarkerGenerator）。

打开地图页面后，MapCubit 开始从 API 加载项目。在构建中，我有 BlocConsumer，侦听器在哪里，当加载到该肘部时构建标记和构建 GoogleMap 的构建器。

问题是，在第一次打开页面时，标记中没有图像，只有白色圆圈。当我尝试为所有标记设置一个图像 url 时，它已正确加载。然后，当我转到上一页或热重新加载（并非总是）时，图标就在那里。在同一页面上，我有图例，它从相同的 url 绘制图像，其中大多数时候图像设置正确。有时需要来回多次。

单击过滤器中的项目后，我可以加载图标，这也称为 MapCubit。

我不知道，如果这意味着什么，但下一个问题，我所拥有的是，在发布和 appbundle 构建时，没有显示地图，只有灰色屏幕，侧面按钮和左下角的谷歌徽标。

我在互联网上尝试了很多技巧，但没有任何帮助。

MapPage首次打开预览

首次打开时预览过滤器（包含所有图标）

MapPage二次开启预览

MapPage 第三次打开预览（有所有图标）

MapPage（MarkerGenerator 在 listener 和 initState 中，因为需要它的两种不同用途）

class _MapAreaState extends State<MapArea> {
  MapCubit _mapCubit;
  Set<Marker> markers = {};
  List<CustomMarker> markerWidgets = [];
  bool markersLoaded = false;

  @override
  void initState() {
    _mapCubit = BlocProvider.of<MapCubit>(context);
    markers = {};

    MarkerGenerator(
        _mapCubit.state.items.map((e) => CustomMarker(type: e.type)).toList(),
        (bitmaps) {
      setState(() {
        bitmaps.asMap().forEach((mid, bmp) {
          IMapItem item = _mapCubit.state.items[mid];
          markers.add(Marker(
              markerId: MarkerId(item.title),
              position: item.latLng,
              icon: BitmapDescriptor.fromBytes(bmp),
              // markerId: MarkerId(item.title),
              // position: item.latLng,
              onTap: () async {
                await _mapCubit.showDetail(item);
              }));
        });
      });
    }).generate(context);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: tercialBackgroundColor,
      child: BlocConsumer<MapCubit, MapState>(
        bloc: _mapCubit,
        listener: (context, state) {

          if (state.changedItems && state.items.isNotEmpty) {
            markerWidgets = _mapCubit.state.items
                .map((e) => CustomMarker(type: e.type))
                .toList();

            markers = {};
            MarkerGenerator(markerWidgets, (bitmaps) {
              setState(() {
                bitmaps.asMap().forEach((mid, bmp) {
                  log(bmp.toString());

                  IMapItem item = _mapCubit.state.items[mid];
                  markers.add(Marker(
                      markerId: MarkerId(item.title),
                      position: item.latLng,
                      icon: BitmapDescriptor.fromBytes(bmp),
                      // markerId: MarkerId(item.title),
                      // position: item.latLng,
                      onTap: () async {
                        await _mapCubit.showDetail(item);
                      }));
                });
              });
            }).generate(context);
          }
        },
        builder: (context, state) {
          return Stack(
            children: [
              GoogleMap(
                zoomControlsEnabled: false,
                compassEnabled: false,
                markers: markers,
                // markers: Set<Marker>.of(state.markers),
                initialCameraPosition: CameraPosition(
                  target: state.items.length == 1
                      ? state.items[0].latLng
                      : LatLng(49.07389317899512, 19.30980263713778),
                  zoom: 8.5,
                ),
                minMaxZoomPreference: MinMaxZoomPreference(8, 22),
                cameraTargetBounds: CameraTargetBounds(LatLngBounds(
                  northeast: LatLng(50.16477808289659, 20.56397637952818),
                  southwest: LatLng(48.75267922516721, 18.76330228064009),
                )),
                onMapCreated: (GoogleMapController controller) {
                  if (!_mapCubit.controller.isCompleted) {
                    rootBundle
                        .loadString('assets/googleMapsStyle.json')
                        .then((string) async {
                      controller.setMapStyle(string);
                    });

                    _mapCubit.controller.complete(controller);
                    log(_mapCubit.controller.toString());
                    log(controller.toString());
                    setState(() {

                    });
                  }
                },
              ),

              // if(state.items.isEmpty)
              // FullScreenLoadingSpinner()
            ],
          );
        },
      ),
    );
  }
}

自定义标记类

class CustomMarker extends StatelessWidget {
  final ItemType type;

  const CustomMarker({Key key, this.type}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // precachePicture(
    //   svgPicture.pictureProvider,
    //   Get.context!,
    // );

    // if(type.icon is /-

    return  Stack(
      clipBehavior: Clip.none,
      children: [
        Icon(
          Icons.add_location,
          color: type.color,
          size: 56,
        ),
        Positioned(
          left: 16,
          top: 10,
          child: Container(
            width: 24,
            height: 24,
            decoration: BoxDecoration(
                color: primaryBackgroundColor,
                borderRadius: BorderRadius.circular(10)),
            child: Padding(
              padding: const EdgeInsets.all(1.0),
              child: Center(child: type.icon),
            ),
          ),
        ),
      ],
    );
  }
}

ItemType 工厂中的图标设置，在 CustomMarker 中使用

icon: map['icon'] != null
            ? (map['icon'] is Image
                ? map['icon']
                : (map['icon'].substring(map['icon'].length - 4) == '.svg'
                    ? WebsafeSvg.network(
                        map['icon'],
                        width: 18,
                        height: 18,
                        color: Colors.black,
                        placeholderBuilder: (BuildContext context) => Container(
                            padding: const EdgeInsets.all(30.0),
                            child: const CircularProgressIndicator()),
                      )
                    : Image.network(map['icon'])))

最近，当这个异常出现在控制台中时

======== Exception caught by image resource service =====================
The following HttpException was thrown resolving an image codec:
, uri = https://www.xxx.sk/images/svgs/culture.png

When the exception was thrown, this was the stack: 
Image provider: NetworkImage("https://www.xxx.sk/images/svgs/culture.png", scale: 1.0)
Image key: NetworkImage("https://www.xxx.sk/images/svgs/culture.png", scale: 1.0)

我不知道，要发送什么，至少到目前为止。谢谢。

4

0 回答 0