reactjs - 如何在带有多边形路径的 react-google-maps 中使用 file.json

Question

我有一个file.json包含太多要修复的数据。

例如：

"coordinates":[[[[97.3438072,18.5761446],[97.3439312,18.5695638],[97.3440129,18.5652256],[97.3449103,18.5526057],[97.3460132,18.551064],[97.3462187,18.5461024],[97.3471493,18.5444575],[97.3505654,18.5420087],[97.35223,18.5384576],[97.35223,18.5372728]................. 

我需要从此文件中绘制多边形。我目前的进展如下。

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Polygon } from 'react-google-maps';
function Map() {
        <div>
           <GoogleMap
            defaultOptions={{
                streetViewControl: false,
                scaleControl: false,
                mapTypeControl: false,
                panControl: false,
                zoomControl: false,
                rotateControl: false,
                fullscreenControl: false
            }}
            defaultZoom={6}
            defaultCenter={{ lat: 14.570032, lng: 106.992538 }}>
            <Polygon
                path={[{ lat: [file.json?], lng: [file.json?] }]}
                options={{
                    strokeColor: "#ff2527",
                }}
            />
        </div>
    }

Answer 1

给定文件的格式file.json（coordinates代表MultiPolygon几何），可以像这样导入

import data from "./file";

然后Polygon像这样初始化：

<Polygon
   path={data.coordinates}
/>

例子

import data from "./file";

function Map(props) {
  const { zoom, center } = props;

  return (
    <GoogleMap defaultZoom={zoom} defaultCenter={center}>
      <Polygon
        path={data.coordinates}
        editable={true}
        options={{
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          polygonKey: 1
        }}
      />
    </GoogleMap>
  );
}