'google-map-react'中的标记如何根据道具的纬度和经度获得其位置?



根据https://www.npmjs.com/package/google-map-react,地图上的标记从道具中获得其在地图上的位置。

import React from "react";
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
export default function SimpleMap(){
const defaultProps = {
center: {
lat: 10.99835602,
lng: 77.01502627
},
zoom: 11
};
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "" }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
</div>
);
}

在这种情况下,AnyReactComponent是地图上的标记。然而,基于SimpleMap组件上面定义的组件,它不将"lag"one_answers"lng"作为道具。它所需要的唯一道具是";文本";。然而,如果我给这个"AnyReactComponent"组件的lat和lng一个值作为道具。这是怎么做到的;AnyReactComponent";用这两个道具改变它的位置?

查看示例:

Marker从不声明道具但当组件在应用中创建时,无论如何都会使用它们

GoogleMapReact只是从子获得latlng道具

如何访问儿童道具

最新更新