Flutter接入高德地图插件并修改其样式

╰+哭是因爲堅強的太久メ 2023-10-09 13:51 47阅读 0赞

#### Flutter使用高德地图 ####

在项目中，我们使用的是混合开发模式 (flutter module)，原生代码中，我们已经有在使用高德地图，再此基础上  
在flutter中，我们现在也需要使用高德地图  
方案有两种  
1.使用`AndroidView`嵌入原生View的方式，封装Flutter高德地图，  
具体可以参考我的另一篇文章 [Flutter嵌入原生View，使用原生的WebView][Flutter_View_WebView]  
2.使用高德地图官方封装好的高德地图flutter插件

这里考虑到开发速度，且高德地图已帮我们封装好了，故我们选择了方案2  
具体接入参考[flutter 高德地图接入 官方文档 : 集成高德地图Flutter插件][flutter _ _ _ _Flutter]

#### 修改样式 ####

虽然高德地图官方已封装好了高德地图flutter插件，但是文档很不详细，对于修改样式这个功能自己摸索了半天，在这里记录一下

import 'dart:io';
    import 'dart:typed_data';
    
    import 'package:flutter/material.dart';
    import 'package:flutter_boost/flutter_boost.dart';
    import '../../global/styles/styles.dart';
    import 'package:amap_flutter_map/amap_flutter_map.dart';
    
    ///高德地图测试
    class TestPage extends StatefulWidget {
        
      const TestPage({
        Key? key}) : super(key: key);
    
      @override
      _TestPageState createState() => _TestPageState();
    }
    
    class _TestPageState extends State<TestPage> with PageVisibilityObserver {
        
      Uint8List? styleData;
      Uint8List? styleExtraData;
    
      @override
      void initState() {
        
        super.initState();
    
        initMapData();
      }
    
      void initMapData() async {
        
        var styleDataFile = File(
            /*这里只是方便测试所以写死，实际项目中应该通过channel动态获取原生代码中已配置好的高地地图样式路径*/
            "/storage/emulated/0/Android/data/com.adinnet.xlebike/files/amap_style/style.data");
        styleData = await styleDataFile.readAsBytes();
        var styleExtraDataFile = File(
           /*这里只是方便测试所以写死，实际项目中应该通过channel动态获取原生代码中已配置好的高地地图样式路径*/
            "/storage/emulated/0/Android/data/com.adinnet.xlebike/files/amap_style/style_extra.data");
        styleExtraData = await styleExtraDataFile.readAsBytes();
        setState(() {
        });
      }
    
      @override
      Widget build(BuildContext context) {
        
        return MaterialApp(
          title: "测试",
          theme: LiuTheme.lightTheme,
          home: Scaffold(
            appBar: XLAppBar(context, "测试"),
            body: AMapWidget(
              customStyleOptions: CustomStyleOptions(
                true,
                styleData: styleData,
                styleExtraData: styleExtraData,
              ),
            ),
          ),
        );
      }
    }

#### 效果如下所示 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]

[Flutter_View_WebView]: https://blog.csdn.net/EthanCo/article/details/122359045
[flutter _ _ _ _Flutter]: https://developer.amap.com/api/flutter/guide/map-flutter-plug-in/map-flutter-info
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8eb31a5da15b4b1e87e8847f295aedaf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16