Flutter虚拟导览APP：自定义Google地图交互组件实现问询

一、基于Google Maps Flutter实现自定义样式地图 #

不用从零搭建地图，直接基于官方google_maps_flutter包修改样式即可，步骤如下：

1. 先在pubspec.yaml中添加依赖：

dependencies:
  google_maps_flutter: ^2.5.0

2. 生成自定义地图样式：使用Google官方的地图样式可视化编辑器，导出JSON格式的样式文件，命名为custom_map_style.json后放到项目assets/map_styles/目录，同时在pubspec.yaml配置资源路径：

flutter:
  assets:
    - assets/map_styles/custom_map_style.json

3. 在代码中加载并应用样式：

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

// 加载自定义样式
Future<Map<String, dynamic>> _loadMapStyle() async {
  String style = await rootBundle.loadString('assets/map_styles/custom_map_style.json');
  return jsonDecode(style);
}

// 渲染地图组件
GoogleMap(
  initialCameraPosition: CameraPosition(target: LatLng(你的纬度, 你的经度), zoom: 16),
  mapStyle: await _loadMapStyle(),
  markers: _createTourMarkers(),
  onMarkerTap: (MarkerId markerId) => _jumpToTourSection(markerId),
)

二、添加可点击点位并实现导览跳转 #

1. 生成导览点位标记：根据你的导览点位数据创建Marker，每个点位对应一个导览章节：

Set<Marker> _createTourMarkers() {
  return {
    Marker(
      markerId: MarkerId('tour_spot_1'),
      position: LatLng(37.7749, -122.4194),
      infoWindow: InfoWindow(title: '导览点位1'),
      // 自定义标记颜色
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
    ),
    // 按需求添加更多点位
  };
}

2. 处理点击事件跳转导览：

void _jumpToTourSection(MarkerId markerId) {
  switch(markerId.value) {
    case 'tour_spot_1':
      Navigator.push(context, MaterialPageRoute(builder: (context) => TourSection1()));
      break;
    case 'tour_spot_2':
      Navigator.push(context, MaterialPageRoute(builder: (context) => TourSection2()));
      break;
    // 其他点位的跳转逻辑
  }
}

三、进阶优化（可选） #

• 若需要更个性化的标记图标，可通过BitmapDescriptor.fromAssetImage加载本地图片：

BitmapDescriptor customMarker = await BitmapDescriptor.fromAssetImage(
  ImageConfiguration(size: Size(48,48)),
  'assets/markers/custom_icon.png',
);

• 导览点位较多时，可将点位数据存入JSON文件，动态生成Marker，避免硬编码。

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