我想在谷歌地图上添加多个多边形内太阳能电池板的小图像

Question

[这是多边形的图像，我想在多边形内添加多个太阳能电池板的图像][1]

我想在谷歌地图上添加多个多边形内太阳能电池板的小图像，我正在使用@react-google-maps/api package

import React from "react";
import {
GoogleMap,
DrawingManager,
LoadScript,
Polygon,
OverlayView,
GroundOverlay,
} from "@react-google-maps/api";
import { setRoofSurface } from "../../Features/RoofArea/roofarea.actions";
import { useDispatch, useSelector } from "react-redux";
import { CircularProgress } from "@material-ui/core";
import solar from "../../assest/images/solar.jpg";
export function AreaMap({ coords }) {
const {
OfferEditionCustomer: {
singleCustomer: { location },
},
} = useSelector((state) => state);
const dispatch = useDispatch();
const containerStyle = {
width: "100%",
height: "60%",
};
const drawingOnLoad = (drawingManager) => {
console.log(drawingManager);
};
const onPolygonComplete = (polygon) => {
var area = window.google.maps.geometry.spherical.computeArea(
polygon.getPath()
);
console.log(polygon.getPoints());
const latlng = polygon.latLngs.Rd[0].Rd.map((item) => {
return {
lat: item.lat(),
lng: item.lng(),
};
});
console.log(polygon.latLngs, "polygon");
if (latlng)
dispatch(
setRoofSurface({ name: "coords", value: JSON.stringify(latlng) })
);
dispatch(setRoofSurface({ name: "area", value: area }));
};
const center = {
lat: 40.74,
lng: -74.18,
};
const bounds = {
north: 1.773941,
south: 40.712216,
east: -74.12544,
west: -74.22655,
};
return (
<div>
<LoadScript
id="script-loader"
googleMapsApiKey=""
language={"en"}
region={"EN"}
version={"weekly"}
loadingElement={
<div
style={{
minWidth: "100%",
minHeight: "50vh",
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
<CircularProgress />
</div>
}
libraries={["drawing,geometry"]}
>
<GoogleMap
mapContainerStyle={containerStyle}
center={location && JSON.parse(location).latlang}
zoom={20}
mapTypeId="satellite"
>
<DrawingManager
onLoad={drawingOnLoad}
onPolygonComplete={onPolygonComplete}
options={{
drawingControl: true,
drawingControlOptions: {
position: 2,
drawingModes: ["polygon"],
},
}}
/>
<Polygon
draggable={true}
editable={true}
options={{
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
}}
paths={coords && JSON.parse(coords)}
/>
{/* <OverlayView
center={location && JSON.parse(location).latlang}
mapPaneName={OverlayView.MAP_PANE}
>
<div style={{ display: "grid" }}>
{Array(20)
.fill()
.map(() => {
return (
<img
src={solar}
style={{ width: "20px", height: "20px" }}
/>
);
})}
</div>
</OverlayView> */}
</GoogleMap>
</LoadScript>
</div>
);
}

Answer 1

这里我们做以下操作。

1.添加多边形

2.获取多边形坐标。

3.现在用指定坐标中的标记绘制一个图标

4.然后它将看起来像多边形内的图标

因此，在这里，添加多边形后，在多边形中心位置的标记的帮助下绘制图标。

var bounds = new google.maps.LatLngBounds();
var i, center;
for (i = 0; i < polygonsCoordinates.length; i++) {
bounds.extend(polygonsCoordinates[i]);
}
center = bounds.getCenter();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: { lat: center.lat(), lng: center.lng() },
map: map,
icon: image
});

这样你就可以添加多个标记。希望这个答案对你有帮助。