javascript - 使用 google-maps-react 绘制多个多边形

问题描述

我试图更改我的地图容器以便能够在我的地图上绘制多个多边形。这是我对 Map 所做的更改

import {
  Map,
  InfoWindow,
  Marker,
  GoogleApiWrapper,
  Polygon
} from 'google-maps-react';
import React, { Component } from 'react';

export class MapContainer extends Component {
  renderMarker = loc => {
    return <Marker key={loc._id} position={loc} />;
  };

  renderPolygon = loc => {
    console.log(loc);
    return (
      <Polygon
        key={loc._id}
        paths={loc}
        strokeColor='#0000FF'
        strokeOpacity={0.8}
        strokeWeight={2}
        fillColor='#0000FF'
        fillOpacity={0.35}
      />
    );
  };

  render() {
    const coords = this.props.initialCenter;
    const markerPositions = this.props.markerPositions;
    const polygonPositions = this.props.polygonPositions;
    const style = this.props.style;
    const center = this.props.center;
    const paths = this.props.paths;

    console.log(this.props.polygonPositions);
    return (
      <Map
        google={this.props.google}
        zoom={18}
        initialCenter={coords}
        style={style}
        center={center}
      >
        {markerPositions.map(this.renderMarker)}
        {polygonPositions.map(this.renderPolygon)}
        {/* <Polygon
          paths={paths}
          strokeColor='#0000FF'
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor='#0000FF'
          fillOpacity={0.35}
        /> */}
        {/* <Polygon
          paths={{ paths }}
          strokeColor='#0000FF'
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor='#0000FF'
          fillOpacity={0.35}
        /> */}
      </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_TEST
})(MapContainer);

而不是绘制一个多边形，我可以接收它们的数组并将它们全部绘制，但到目前为止我的地图没有加载。

这就是我从服务中获取多边形图的方式：

const polygon = this.props.places.places.map(place => {
      return place.location.coordinates.map(values =>
        values.map(data => {
          return { lat: data[0], lng: data[1] };
        })
      );
    });

这就是从多边形返回的内容。

console.log(
      'POLYGON',
      JSON.stringify(polygon[0]),
      'MULTIPLOS',
      JSON.stringify(polygon)
    );

POLYGON [[{"lat":41.53113384600326,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.619018495082855}]] 

MULTIPLOS [[[{"lat":41.53113384600326,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.619018495082855}]],[[{"lat":-8.619018495082855,"lng":41.53113384600326},{"lat":-8.61851692199707,"lng":41.53113384600326},{"lat":-8.61851692199707,"lng":41.53129447698251},{"lat":-8.619018495082855,"lng":41.53129447698251},{"lat":-8.619018495082855,"lng":41.53113384600326}]]]

我可以绘制一个多边形，但如果我可以从我的数据库中绘制多个多边形就更好了。有什么帮助吗？

标签： javascriptreactjs

javascript - 使用 google-maps-react 绘制多个多边形

问题描述

解决方案

推荐阅读