多边形未出现在 react-google-maps 中

Question

我正在尝试在 react-google-maps 插件中实现多边形，但它不起作用。它没有错误，但我在地图上也看不到任何多边形。

我可以在页面上看到地图，也出现了标记。但我现在看不到任何多边形。

我在这里分享我的代码，任何帮助将不胜感激。

const coords = [
{lat: 29.047487,lng: 41.023164},
{lat: 29.0459633,lng: 41.0212904},
{lat: 29.0449333,lng: 41.0167573},
{lat: 29.0393543,lng: 41.0106695},
{lat: 29.032917,lng: 41.0049697},
{lat: 29.0226173,lng: 41.0061356},
{lat: 29.0078545,lng: 41.0039334},
{lat: 29.0201283,lng: 40.9765933},
{lat: 29.0319729,lng: 40.9657708},
{lat: 29.0784073,lng: 40.9536501},
{lat: 29.0944576,lng: 40.9493068},
{lat: 29.0975475,lng: 40.9514461},
{lat: 29.1052294,lng: 40.9647986},
{lat: 29.097338,lng: 40.978242},
{lat: 29.0931273,lng: 40.9835914},
{lat: 29.0858746,lng: 40.987738},
{lat: 29.056509,lng: 40.998902},
{lat: 29.061456,lng: 41.008443},
{lat: 29.0617561,lng: 41.0104752},
{lat: 29.0595245,lng: 41.0126772},
{lat: 29.052014,lng: 41.018198},
{lat: 29.047487,lng: 41.023164}];

const MyMapComponent = compose(
withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_IS_HERE&v=3.exp&libraries=geometry,drawing,places",
    loadingElement : <div style={{height: window.innerHeight - 80}}/>,
    containerElement : <div style={{height: window.innerHeight - 80, width: window.innerWidth}}/>,
    mapElement : <div style={{height: window.innerHeight - 80}}/>
}),
withScriptjs,
withGoogleMap)((props) =>
<GoogleMap
    defaultZoom={9}
    defaultCenter={{lat: 41.015137, lng: 28.979530}}
>
    {props.isMarkerShown && <Marker position={{lat: 41.015137, lng: 28.979530}}/>}
    <Polygon
        path={coords}
        key={1}
        options={{
            fillColor: "#000",
            fillOpacity: 0.4,
            strokeColor: "#000",
            strokeOpacity: 1,
            strokeWeight: 1
        }}
        onClick={() => {
            console.log("ahmet")
        }}/>
</GoogleMap>);

renderTripMap() {

    return <div className="animated fadeIn">
        {this.renderButtons()}
        <MyMapComponent isMarkerShown/>
    </div>
}

Answer 1

实际上，多边形正在显示，但似乎不在您期望的位置。

一旦 lat 和 lng 互换

const reversedCoords = coords.map( ll => {
    return { lat: ll.lng, lng: ll.lat }
}); 

多边形在视口中变得可见。

Demo

Answer 2

`here is all about polygon and draing tools

---

 import React from "react"
 import {
withGoogleMap,
GoogleMap,
Marker,
withScriptjs,
} from "react-google-maps";
import DrawingManager from "react-google-maps/lib/components/drawing/DrawingManager";

import { MarkerWithLabel } from "react-google-maps/lib/components/addons/MarkerWithLabel";
import { Polygon } from "react-google-maps";
import { compose, withProps } from "recompose";

function GoogleMapsForDelivertCharges() {
// getModalStyle is not a pure function, we roll the style only on   the first render
const [open, setOpen] = React.useState(false);
const [cordinates, setCordinates] = React.useState([
    [
        {
            lat: 36.95017264518586,
            lng: -98.88559984996449,
        },
        {
            lat: 36.70394136086435,
            lng: -88.07505297496449,
        },
        {
            lat: 31.691080846084553,
            lng: -94.53501391246449,
        },
    ],

    [
        {
            lat: 36.879901722288025,
            lng: -124.06626391246449,
        },
        {
            lat: 37.961800398724435,
            lng: -110.61899828746449,
        },
        {
            lat: 29.53553533552923,
            lng: -107.23520922496449,
        },
        {
            lat: 28.61376794407866,
            lng: -122.30845141246449,
        },
    ],
    [
        {
            lat: 48.65307495113541,
            lng: -112.36842037145917,
        },
        {
            lat: 46.640219756834924,
            lng: -104.72193599645917,
        },
        {
            lat: 43.729651946710675,
            lng: -113.15943599645917,
        },
    ],
]);

const MyMapComponent = compose(
    withProps({
        googleMapURL:
            "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
)((props) => (
    <GoogleMap
        defaultZoom={3}
        defaultCenter={
            new window.google.maps.LatLng(
                36.95017264518586,
                -98.88559984996449,
            )
        }>
        {/* {props.isMarkerShown && (
            <Marker position={{ lat: 26.9124, lng: 75.7873 }} />
        )} */}
        <MarkerWithLabel
            position={{ lat: 36.95017264518586, lng: -98.88559984996449 }}
            labelAnchor={new window.google.maps.Point(0, 0)}
            labelStyle={{
                backgroundColor: "yellow",
                fontSize: "20px",
                padding: "8px",
            }}>
            <div>YOUR HERE!</div>
        </MarkerWithLabel>

        <DrawingManager
            defaultDrawingMode={
                window.google.maps.drawing.OverlayType.POLYGON
            }
            onPolygonComplete={function (polygon) {
                OpenModalBox(polygon);
                // console.log(polygon);
            }}
            defaultOptions={{
                drawingControl: true,
                drawingControlOptions: {
                    position: window.google.maps.ControlPosition.TOP_CENTER,
                    draggable: true,
                    drawingModes: [
                        window.google.maps.drawing.OverlayType.POLYGON,
                        window.google.maps.drawing.OverlayType.RECTANGLE,
                        // window.google.maps.drawing.OverlayType.CIRCLE,
                        // window.google.maps.drawing.OverlayType.POLYLINE,
                    ],
                },
                rectangleOptions: {
                    draggable: true,
                    editable: true,
                    strokeColor: "#00FF00",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#00FF00",
                    fillOpacity: 0.35,
                    onRightClick: function (event) {
                        alert("Right Clicked");
                    },
                },
                // circleOptions: {
                //  draggable: true,
                //  editable: true,
                //  strokeColor: "#FF0000",
                //  strokeOpacity: 0.8,
                //  strokeWeight: 2,
                //  fillColor: "#FF0000",
                //  fillOpacity: 0.35,
                //  zIndex: 1,
                // },
                polygonOptions: {
                    draggable: true,
                    editable: true,
                    strokeColor: "#00FF00",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#00FF00",
                    fillOpacity: 0.35,
                    onRightClick: function (event) {
                        alert("Right Clicked");
                    },
                },
            }}
        />
        <Polygon
            draggable={true}
            editable={true}
            onClick={function (event) {
                alert("clicked");
            }}
            options={{
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
            }}
            paths={cordinates}
        />
    </GoogleMap>
));
// Google Map End  here
const OpenModalBox = (polygon) => {
    const coords = polygon
        .getPath()
        .getArray()
        .map((coord) => {
            return {
                lat: coord.lat(),
                lng: coord.lng(),
            };
        });
    console.log("OpenModal", coords);
    // setCordinates([...cordinates, coords]);
    // alert("OpenModal");
};
console.log(cordinates);
return (
    <div>
        <MyMapComponent />
    </div>
);
  }

    export default React.memo(GoogleMapsForDelivertCharges);

`