Flutter中Google Maps途经点侧边栏数据展示方案咨询

核心思路 #

基于同一套途经点数据源，将地图组件与侧边栏UI做双向绑定，确保两边数据实时同步，同时实现交互联动。

具体实现步骤 #

• 1. 定义途经点数据模型
  先创建统一的Waypoint类，存储途经点核心信息，确保地图和侧边栏共用同一数据源：

  class Waypoint {
    final String name;
    final LatLng position;
    final int index;
  
    Waypoint({required this.name, required this.position, required this.index});
  }
  

• 2. 页面布局设计
  使用Row拆分页面，左侧为固定宽度的侧边栏，右侧为占满剩余空间的Google Maps组件：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 侧边栏：固定宽度展示途经点列表
          Container(
            width: 300,
            color: Colors.white,
            child: _buildWaypointList(),
          ),
          // Google Maps组件：占满剩余宽度
          Expanded(
            child: GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 12),
              polylines: {
                Polyline(
                  polylineId: PolylineId('route'),
                  points: _waypoints.map((wp) => wp.position).toList(),
                  color: Colors.blue,
                  width: 3,
                )
              },
              markers: _waypoints.map((wp) => Marker(
                markerId: MarkerId(wp.index.toString()),
                position: wp.position,
                infoWindow: InfoWindow(title: wp.name),
              )).toSet(),
              onMapCreated: (controller) => _controller = controller,
            ),
          ),
        ],
      ),
    );
  }
  

• 3. 侧边栏列表实现
  用ListView.builder渲染途经点列表，支持点击定位、删除操作：

  Widget _buildWaypointList() {
    return ListView.builder(
      padding: EdgeInsets.all(16),
      itemCount: _waypoints.length,
      itemBuilder: (context, index) {
        final wp = _waypoints[index];
        return ListTile(
          leading: CircleAvatar(child: Text(wp.index.toString())),
          title: Text(wp.name),
          trailing: IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {
              setState(() {
                _waypoints.removeAt(index);
                // 同步更新途经点序号
                for (var i = 0; i < _waypoints.length; i++) {
                  _waypoints[i] = Waypoint(
                    name: _waypoints[i].name,
                    position: _waypoints[i].position,
                    index: i + 1,
                  );
                }
              });
            },
          ),
          onTap: () {
            // 点击侧边栏条目，地图定位到对应途经点
            _controller.animateCamera(
              CameraUpdate.newLatLngZoom(wp.position, 15),
            );
          },
        );
      },
    );
  }
  

• 4. 数据同步与交互联动

  • 地图上添加/删除途经点时，直接修改_waypoints列表并调用setState，侧边栏自动刷新；
  • 侧边栏的删除、点击操作，通过修改数据源或调用地图控制器，实现与地图的联动。

注意事项 #

• 确保使用google_maps_flutter官方包，提前配置好API密钥；
• 移动端小屏幕场景下，可将侧边栏改为抽屉（Drawer）或可折叠面板，避免遮挡地图；
• 复杂场景可使用Provider、Riverpod等状态管理工具替代setState，提升数据同步效率。

内容的提问来源于stack exchange，提问作者Flari