gpt4 book ai didi

reactjs - 多边形没有出现在react-google-maps中

转载 作者:行者123 更新时间:2023-12-02 20:19:34 24 4
gpt4 key购买 nike

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

我可以在页面上看到 map ,也出现标记。但我现在看不到任何多边形。

我在下面分享我的代码,任何帮助将不胜感激。

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>
}

最佳答案

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

一旦 latlng 互换

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

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

Demo

关于reactjs - 多边形没有出现在react-google-maps中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51729442/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com