我的热图无法渲染，不知何故看到白屏

Question

使用 React google 地图 api 并尝试渲染热图，但是要么没有出现热图，要么整个屏幕变成全白页面。我尝试过使用 HeatmapLayerF 但它也不起作用。当它是白色屏幕时，即使是侧面和顶部的选项卡也会消失，不仅仅是地图本身，整个屏幕都会变成白色。我不确定我做错了什么，如果有人可以更正我的代码，我将不胜感激。

import React, { useState, useEffect, useRef } from 'react';
import { GoogleMap, useJsApiLoader, Marker, InfoWindow, HeatmapLayer } from '@react-google-maps/api';

const containerStyle = {
  width: '92vw',
  height: '92vh'
};

const center = {
  lat: 1.2966,
  lng: 103.7764,
};

//const positions = [
//  { lat: 1.2966, lng: 103.7764 },
//  { lat: 1.2950, lng: 103.7750 },
//];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'AIzaSyB0v_mzVewnJ31mzDVoJEGCLLBloX0RvVw', 
    libraries: 'visualization',
  });

  const [map, setMap] = React.useState(null);
  const heatmapRef = useRef(null);


  useEffect(() => {
    if (isLoaded) {
      // The Google Maps JavaScript API with the "visualization" library is loaded.
      // You can use it here to create the HeatmapLayer and map.
      const heatMapData = [
        new window.google.maps.LatLng(1.2966, 103.7764),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        // Add more data points as needed
      ];

      const loc = new window.google.maps.LatLng(1.2950, 103.7750);

      const map = new window.google.maps.Map(heatmapRef.current, {
        center: loc,
        zoom: 13,
        mapTypeId: 'satellite',
      });

      const heatmap = new window.google.maps.visualization.HeatmapLayer({
        data: heatMapData,
        map,
      });
      heatmap.setMap(map);
    }
  }, [isLoaded]);


  return isLoaded ? (
    <div style={{ paddingTop: '4vh' }}>
      <GoogleMap
        mapContainerStyle={{
          ...containerStyle,
          outline: 'none',
        }}
        center={center}
        zoom={16.1}
        options={{ // Set the map options here
          mapTypeId: 'satellite', // Change the map type to satellite
        }}
        onLoad={() => {}}
      >
        <div ref={heatmapRef} style={{ width: '100%', height: '100%' }} />
      </GoogleMap>
    </div>
  ) : <></>;
}

export default React.memo(Map);

我的代码如下，但到目前为止没有任何效果，请发送帮助:(((

Answer 1

只需使用

<HeatMapLayerF />

组件

根据

react-google-maps

非常过时的样式文档指南 和 Github 存储库，您可以将

HeatMapLayer

组件用于此类用例。

为此，您只需将

HeatMapLayer

组件与

GoogleMaps

组件包裹起来，如下所示：

<GoogleMap>
  <HeatMapLayerF />
</GoogleMap>

我们将使用功能组件版本

HeatMapLayerF

以避免兼容性问题。

现在要解决您提供的代码，存在很多错误和不必要的代码，使其无法挽救。就像

useJsApiLoader

加载器 props

libraries

一样，它必须在渲染组件之外实例化，这样它才会是静态的，并且应该是一个像这样的数组：

const libraries = ["visualization"];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "",
    libraries: libraries
  });
...

为了修复问题，我只是使用 github 存储库中的示例代码重新创建了所有内容，并添加了您的详细信息/选项和 HeatMapLayer

 组件：

import React from "react";
import {
  GoogleMap,
  useJsApiLoader,
  HeatmapLayerF
} from "@react-google-maps/api";

const containerStyle = {
  width: "100vw",
  height: "100vh"
};

const center = {
  lat: 1.2966,
  lng: 103.7764
};

const libraries = ["visualization"];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "",
    libraries: libraries
  });

  const [map, setMap] = React.useState(null);

  const onLoad = React.useCallback(function callback(map) {
    setMap(map);
  }, []);

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null);
  }, []);

  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={16}
      onLoad={onLoad}
      onUnmount={onUnmount}
    >
      {/* Child components, such as markers, info windows, etc. */}
      {/* Putting the data array here since it was not working on other places */}
      <HeatmapLayerF
        data={[
          new window.google.maps.LatLng(1.2966, 103.7764),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775)
          // Add more data points as needed
        ]}
      />
    </GoogleMap>
  ) : (
    <></>
  );
}

export default React.memo(Map);

这是一个概念验证沙箱，供您自行检查它现在是否正常工作：

https://codesandbox.io/s/heatmap-layer-implementation-frthw9?file=/src/App.js

我希望这有帮助！