如何将热图添加到 Flutter 移动应用程序

Posted 2023-02-23

【中文标题】如何将热图添加到 Flutter 移动应用程序

【英文标题】：How to Add HeatMaps to Flutter Mobile app

【发布时间】：2020-02-07 04:02:42

【问题描述】：

我正在尝试将热图添加到 GoogleMaps，我在文档中找不到对此的任何引用，有没有办法这样做。？我知道有一种方法可以在 Web 上做到这一点。 有没有替代方案。在此先感谢

【参考方案1】：

Flutter 的谷歌地图库还没有完全完善，谷歌地图的很多功能目前在 Flutter 中不可用，但我认为在下一个版本中应该包含这些功能

【讨论】：

哦，我明白了。谢谢

现在是否有建议的解决方法或者是否可以编写自定义内容？

如果可能，请分享任何真实的代码示例。

【参考方案2】：

这是一个 pub 包 google_maps_flutter_heatmap 从原始 google_maps_flutter 派生出来作为一种快速解决方法。我认为 Flutter 团队仍在努力。但同时使用它，它在 android 上对我有用（尚未测试 ios 支持）。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter_heatmap/google_maps_flutter_heatmap.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Google Heatmap Demo',
      home: MapSample(),
    );
  


class MapSample extends StatefulWidget 
  @override
  State<MapSample> createState() => MapSampleState();


class MapSampleState extends State<MapSample> 
  Completer<GoogleMapController> _controller = Completer();
  final Set<Heatmap> _heatmaps = ;
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );
  LatLng _heatmapLocation = LatLng(37.42796133580664, -122.085749655962);
  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        heatmaps: _heatmaps,
        onMapCreated: (GoogleMapController controller) 
          _controller.complete(controller);
        ,
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _addHeatmap,
        label: Text('Add Heatmap'),
        icon: Icon(Icons.add_box),
      ),
    );
  
  void _addHeatmap()
    setState(() 
      _heatmaps.add(
        Heatmap(
          heatmapId: HeatmapId(_heatmapLocation.toString()),
          points: _createPoints(_heatmapLocation),
          radius: 20,
          visible: true,
          gradient:  HeatmapGradient(
            colors: <Color>[Colors.green, Colors.red], startPoints: <double>[0.2, 0.8]
          )
        )
      );
    );
  
  //heatmap generation helper functions
  List<WeightedLatLng> _createPoints(LatLng location) 
    final List<WeightedLatLng> points = <WeightedLatLng>[];
    //Can create multiple points here
    points.add(_createWeightedLatLng(location.latitude,location.longitude, 1));
    points.add(_createWeightedLatLng(location.latitude-1,location.longitude, 1)); 
    return points;
  

  WeightedLatLng _createWeightedLatLng(double lat, double lng, int weight) 
    return WeightedLatLng(point: LatLng(lat, lng), intensity: weight);
  

【参考方案3】：

由于官方包还没有实现热图（well, there's a PR, but it seems abandoned），所以我发现了这个功能：

Here is a fork that implements heatmap feature both on Android and iOS，但在 iOS 上存在一些显示问题（热图在两个操作系统上都能正确显示，但在 iOS 上的位置不透明度不正确，如下所示）；

有人forked 上面四月的叉子，但是cannot test it on iOS。 我寻找的是Mapbox 热图而不是谷歌地图热图，不幸的是它也是not implemented。

也许有办法using Leaflet maps。

【讨论】：

你找到方法了吗？！

使用上面提到的 fork，我设法通过稍微调整设置在 Android 和 iOS 上显示热图。截图：github.com/pandemia-app/pandemia/pull/31 代码 sn-p：github.com/pandemia-app/pandemia/pull/31/commits/… 但是，请记住，此代码已有一年多的历史，从那时起可能会出现替代方案。