Question

我试图创建由多边形而不是点组成的热图。我使用google.map.LatLng类和Polygon使用Polygon类（下面的代码）创建点

const createPolygon = polygon => {
    const points = polygon.geometry.coordinates[0].map(point => {
        return new window.google.maps.LatLng(point[0], point[1]); // [lat, lng]
    });
    return new google.maps.Polygon({ // eslint-disable-line
        paths: points
    });

};

然后我使用react-google-maps库中的HeatmapLayer组件渲染它（尽管不认为这很重要）。

 <HeatmapLayer data={heatmapData.map(createPolygon)} />

不幸的是我收到了这样的错误。

{message: "not an Array or MVCArray", name: "InvalidValueError", stack: "Error↵    at new mc (https://maps.googleapis.com/m…react-dom/lib/ReactCompositeComponent.js?:294:16)"}

Uncaught TypeError: b.lat is not a function

我也试过这个方法

<HeatmapLayer data={new google.maps.MVCArray(data)} />

但是我又来了

Uncaught TypeError: b.lat is not a function

我是否必须以某种破坏性的方式创建Polygon，或者直接无法完成我想要做的事情？

任何帮助和提示将不胜感激

Answer 1

热图需要将数据定义为LatLng对象的数组

例如

var heatmapData = [
          new google.maps.LatLng(37.782, -122.447),
          new google.maps.LatLng(37.782, -122.445),
          new google.maps.LatLng(37.782, -122.443),
          new google.maps.LatLng(37.782, -122.441),
          new google.maps.LatLng(37.782, -122.439),
          new google.maps.LatLng(37.782, -122.437),
          new google.maps.LatLng(37.782, -122.435),
          new google.maps.LatLng(37.785, -122.447),
          new google.maps.LatLng(37.785, -122.445),
          new google.maps.LatLng(37.785, -122.443),
          new google.maps.LatLng(37.785, -122.441),
          new google.maps.LatLng(37.785, -122.439),
          new google.maps.LatLng(37.785, -122.437),
          new google.maps.LatLng(37.785, -122.435)
        ];

您还可以为其提供一个由WeightedLocation和LatLng对象混合而成的数组

例如

var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

尝试使用此功能：

const createPolygon = polygon => {
    const points = polygon.geometry.coordinates[0].map(point => {
        return new window.google.maps.LatLng(point[0], point[1]); // [lat,lng]
    });
    return points;
}

这将返回适用于热图的LatLng对象数组

谷歌地图中的多边形热图图层

1 个答案: