多边形未出现在 react-google-maps 中
Polygon not appearing in react-google-maps
我正在尝试将多边形实现到 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>
}
事实上,多边形正在显示,但似乎不在您期望的位置。
一旦 lat
和 lng
互换
const reversedCoords = coords.map( ll => {
return { lat: ll.lng, lng: ll.lat }
});
多边形在视口中变得可见。
<p>`这里是关于多边形和绘图工具的全部内容</p>
<hr />
<pre><code> 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);
`
我正在尝试将多边形实现到 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>
}
事实上,多边形正在显示,但似乎不在您期望的位置。
一旦 lat
和 lng
互换
const reversedCoords = coords.map( ll => {
return { lat: ll.lng, lng: ll.lat }
});
多边形在视口中变得可见。
<p>`这里是关于多边形和绘图工具的全部内容</p>
<hr />
<pre><code> 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);
`