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

Flutter使用高德地图

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

这里考虑到开发速度,且高德地图已帮我们封装好了,故我们选择了方案2
具体接入参考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,
          ),
        ),
      ),
    );
  }
}

效果如下所示

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

氦客

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值