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

Question

我正在尝试在 flutter 中将热图添加到 GoogleMaps，我在文档中找不到对此的任何参考，有没有办法这样做。？我知道有一种方法可以在 Web 上这样做。有其他选择吗？提前致谢

Answer 1

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

Answer 2

这是一个从原始 google_maps_flutter 派生出来的发布包 google_maps_flutter_heatmap 作为快速解决方法。我认为 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)，以下是我对该功能的发现：

Here is a fork that implements heatmap feature both on Android and iOS，但在 iOS 上有一些显示问题（热图在两个 OS 上都正确显示，但 iOS 上的位置不透明度不正确，如下所示);

有人 forked the fork above on April, but cannot test it on iOS.
我查找的不是 Google 地图热图，而是 Mapbox heatmaps, unfortunately it's also not implemented。

也许有办法using Leaflet maps。

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

How to Add HeatMaps to Flutter Mobile app

mobile

google-maps

heatmap

dart

flutter