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

Question

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

Answer 1

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

Answer 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);
  }

}

Answer 3

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

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

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

也许有办法using Leaflet maps。