1

我的 Firebase 数据库中有很多地方，我想将它们全部提取并在地图上显示。我已经能够显示一个地方，但是要显示所有地方，我需要先获取这些地方的地理点，然后在地图上一一显示。

当将地点显示为列表时，我使用了 ListView.builder，是否有类似的方法可以循环遍历地点并构建地图，同时逐个获取每个地点？

正如您在下面看到的，因为 id 的值仅在循环内更改，_buildMap 方法无法访问它。

Widget _getData() {
    var id;
    final length = Provider.of<Places>(context, listen: false).ids.length;
    for (int i = 0; i < length; ++i) {
      Consumer<Places>(
          builder: (context, placesData, _) => FutureBuilder(
              future: placesData.fetchPlace(placesData.ids[i]),
              builder: (_, snapshot) {
                id = placesData.ids[i];
                if (snapshot.connectionState == ConnectionState.waiting)
                  return Text("Loading");

                return _buildMap(placesData.ids[i]);
              }));
    }
    return _buildMap(id);
  } 

 Widget _buildMap(String placeId) {
    final place = Provider.of<Places>(context).findById(placeId);
    final lat = place.geo.latitude;
    final long = place.geo.longitude;
    var center = LatLng(lat, long);
    _addMarker(center, name);
    return Stack(
      children: <Widget>[
        GoogleMap(
          zoomGesturesEnabled: true,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          initialCameraPosition: CameraPosition(
            target: center,
            zoom: 12.0,
          ),
          myLocationEnabled: true,
          compassEnabled: true,
          markers: _markers,
        ),
        Align(
            alignment: Alignment.topRight,
            child: IconButton(
                icon: Icon(Icons.add_circle_outline),
                color: Colors.green[800],
                iconSize: 30,
                padding: EdgeInsets.fromLTRB(5, 330, 5, 5),
                onPressed: () {
                  _zoomIn(12.0);
                })),
        Align(
            alignment: Alignment.topRight,
            child: IconButton(
                icon: Icon(Icons.remove_circle_outline),
                color: Colors.green[800],
                iconSize: 30,
                padding: EdgeInsets.fromLTRB(5, 270, 5, 5),
                onPressed: () {
                  _zoomOut(12.0);
                }))
      ],
    );
4

0 回答 0