在地图上渲染标记与反应谷歌地图

Question

我正在尝试在谷歌地图上加载标记，但我不知道该怎么做。在文档中，它显示了下一个示例：

const MyMapComponent = compose(
withProps({
googleMapURL: "api key",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
{props.isMarkerShown && (
<Marker position={{ lat: -34.397, lng: 150.644 }} />
)}
</GoogleMap>
));
ReactDOM.render(<MyMapComponent isMarkerShown />, document.getElementById("root"));

但我实际上要做的是创建地图组件并在另一个组件中调用它。 当我调用地图时，地图加载正常，但我的问题是：如何将标记传递给我调用地图的组件？

这是我的地图组件：

import React from "react";
import ReactDOM from "react-dom";
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker
} from "react-google-maps";
const MyMapComponent = compose(
withProps({
googleMapURL:
"api key",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={15} defaultCenter={{ lat: 46.802681, lng: 23.764006 }}>
{props.isMarkerShown && (
<Marker position={{ lat: 46.802681, lng: 23.764006 }} />
)}
</GoogleMap>
));
export default MyMapComponent;

然后我在另一个组件中调用它，如下所示：

import MyMapComponent from './myMap';
const Contact = () => {
return (
<div class="contact">
<MyMapComponent />
</div>
)
}

Answer 1

在返回MyMapComponent时Contact组件中，按照您在地图组件中定义的方式传递道具isMarkerShown，因为它需要道具isMarkerShown来渲染标记，如果您想向其传递动态坐标，您可以在联系人组件中编写如下内容：

import MyMapComponent from './myMap';
const Contact = () => {
return (
<div class="contact">
<MyMapComponent isMarkerShown lat={49.076} lng={42.8777} />
</div>
)
}

在您的地图组件中：

import React from "react";
.
.
const MyMapComponent = compose(
withProps({
googleMapURL:"API Key",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />
)},
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={15} 
defaultCenter={{ lat: props.lat, lng: props.lng }}>
{props.isMarkerShown && (
<Marker position={{ lat: props.lat, lng: props.lng }} />
)}
</GoogleMap>
));
export default MyMapComponent;