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

【问题标题】：How to use file.json in react-google-maps with polygon path如何在带有多边形路径的 react-google-maps 中使用 file.json
【发布时间】：2019-10-29 05:59:44
【问题描述】：

我有一个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>
    }

【问题讨论】：

标签： reactjs geojson react-google-maps geomap

【解决方案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>
  );
}

【讨论】：