使用 Google 地图一次将用户限制为一个多边形

Question

我有一个 React-Google-Maps 组件，它允许用户绘制多边形并通过回调将这些多边形的关联 GeoJSON 传递给父组件。

我想做的是将用户一次限制为一个多边形；这意味着，当用户完成一个多边形时，所有先前渲染的多边形都将被删除。

我已经看到了一些关于如何使用 vanilla JS、jQuery 和 Angular 2 做到这一点的示例，但在 React 上没有。

我的组件：

import React, { Component } from 'react';
const { compose, withProps } = require('recompose');
const { withScriptjs, withGoogleMap, GoogleMap } = require('react-google-maps');
const {
    DrawingManager
} = require('react-google-maps/lib/components/drawing/DrawingManager');

const editTrack = polygon => {
    let GeoJSON = {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: []
        },
        properties: {}
    };
    for (let point of polygon.getPath().getArray()) {
        GeoJSON.geometry.coordinates.push([point.lng(), point.lat()]);
    }
    return GeoJSON;
};

const PlotMap = compose(
    withProps({
        googleMapURL:
            'https://maps.googleapis.com/maps/api/js?key=mykey&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={8}
        defaultCenter={new google.maps.LatLng(32.095, 35.398)}>
        <DrawingManager
            onPolygonComplete={polygon => {
                polygon.setEditable(true);
                props.getGeoJSON(editTrack(polygon));
                google.maps.event.addListener(polygon.getPath(), 'insert_at', function(
                    index,
                    obj
                ) {
                    props.getGeoJSON(editTrack(polygon));
                });
                google.maps.event.addListener(polygon.getPath(), 'set_at', function(
                    index,
                    obj
                ) {
                    props.getGeoJSON(editTrack(polygon));
                });
            }}
            defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
            defaultOptions={{
                drawingControl: true,
                drawingControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                }
            }}
        />
    </GoogleMap>
));

export default PlotMap;

Answer 1

好的，知道了。

import React, { Component } from 'react';
const { compose, withProps } = require('recompose');
const { withScriptjs, withGoogleMap, GoogleMap } = require('react-google-maps');
const {
    DrawingManager
} = require('react-google-maps/lib/components/drawing/DrawingManager');

const editTrack = polygon => {
    let GeoJSON = {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: [[]]
        },
        properties: {}
    };
    for (let point of polygon.getPath().getArray()) {
        GeoJSON.geometry.coordinates[0].push([point.lng(), point.lat()]);
    }
    GeoJSON.geometry.coordinates[0].push(GeoJSON.geometry.coordinates[0][0]);
    return GeoJSON;
};
 //this is where we will keep our polygon when it is drawn
let latestPolygon;

const PlotMap = compose(
    withProps({
        googleMapURL:
            'https://maps.googleapis.com/maps/api/js?key=mykey&v=3.exp&libraries=geometry,drawing,places',
        loadingElement: <div style={{ height: `100%`, width: `100%` }} />,
        containerElement: <div style={{ height: `400px`, width: `100%` }} />,
        mapElement: <div style={{ height: `100%`, width: `100%` }} />
    }),
    withScriptjs,
    withGoogleMap
)(props => (
    <GoogleMap
        defaultZoom={8}
        defaultCenter={new google.maps.LatLng(32.095, 35.398)}>
        <DrawingManager
            onPolygonComplete={polygon => {
//if we have a polygon on the map, delete it now
                latestPolygon && latestPolygon.setMap(null); 
                polygon.setEditable(true);
                props.getGeoJSON(editTrack(polygon));
                google.maps.event.addListener(polygon.getPath(), 'insert_at', function(
                    index,
                    obj
                ) {
                    props.getGeoJSON(editTrack(polygon));
                });
                google.maps.event.addListener(polygon.getPath(), 'set_at', function(
                    index,
                    obj
                ) {
                    props.getGeoJSON(editTrack(polygon));
                });
//now we set the storage polygon to be the one we just drew
                latestPolygon = polygon;
            }}
            defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
            defaultOptions={{
                drawingControl: true,
                drawingControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                }
            }}
        />
    </GoogleMap>
));

export default PlotMap;