在 React 上显示 highmaps 地图

Question

你好我正在创建一个反应界面，当用户访问该网站时，会出现一个弹出窗口，要求用户接受访问用户位置的权限。在用户接受使用该位置后，将在用户位置上显示带有标记的标记。我正在使用高图，这是代码。

import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsMap from 'highcharts/modules/map';
import mapData from '@highcharts/map-collection/countries/us/us-all.geo.json';

HighchartsMap(Highcharts);

const MapChart = () => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        setLocation({
          lat: position.coords.latitude,
          lon: position.coords.longitude
        });
      });
    }
  }, []);

  const options = {
    chart: {
      map: 'countries/us/us-all'
    },
    title: {
      text: 'Your Location'
    },
    series: [{
      type: 'mappoint',
      name: 'Your Location',
      data: location ? [{ lat: location.lat, lon: location.lon }] : []
    }]
  };

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      constructorType={'mapChart'}
    />
  );
};

export default MapChart;

App.js

import React from 'react';
import MapChart from './MapChart';

function App() {
  return (
    <div>
      <MapChart />
    </div>
  );
}

export default App;

当我运行代码时，我得到一个空界面，根本没有地图，它显示了这个

现在看控制台，我发现这个错误

xhr.js:187 
 GET http://localhost:8000/village_pred/ net::ERR_CONNECTION_REFUSED
dispatchXhrRequest  @   xhr.js:187
xhrAdapter  @   xhr.js:13
dispatchRequest @   dispatchRequest.js:53
request @   Axios.js:108
Axios.<computed>    @   Axios.js:129
wrap    @   bind.js:9
(anonymous) @   Navbar.jsx:29
commitHookEffectListMount   @   react-dom.development.js:23150
invokePassiveEffectMountInDEV   @   react-dom.development.js:25154
invokeEffectsInDev  @   react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV  @   react-dom.development.js:27330
flushPassiveEffectsImpl @   react-dom.development.js:27056
flushPassiveEffects @   react-dom.development.js:26984
(anonymous) @   react-dom.development.js:26769
workLoop    @   scheduler.development.js:266
flushWork   @   scheduler.development.js:239
performWorkUntilDeadline    @   scheduler.development.js:533

我怎样才能解决这个问题，以便看到地图？

Answer 1

您需要再添加一个

map

类型的系列：

  const options = {
    title: {
      text: "Your Location"
    },
    series: [
      {
        type: "map",
        mapData
      },
      {
        type: "mappoint",
        name: "Your Location",
        data: location ? [{ lat: location.lat, lon: location.lon }] : []
      }
    ]
  };

---

现场演示： https://codesandbox.io/s/highcharts-react-demo-zn6o2b?file=/demo.jsx

文档： https://www.highcharts.com/docs/maps/map-series