Javascript 使用谷歌地图在地图上渲染标记

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

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"));

const MyMapComponent=compose(
用道具({
googleMapURL：“api密钥”，
加载元素：，
集装箱运输：，
mapElement：
}),
用ScriptJS，
用谷歌地图
)（道具=>(
{props.ismarkersown&&(
)}
));
render（，document.getElementById（“根”））；

但我实际上要做的是创建map组件并在另一个组件中调用它。 当我调用贴图时，贴图加载良好，但我的问题是：如何将标记传递到调用贴图的组件

这是我的地图组件：

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;

从“React”导入React；
从“react dom”导入react dom；
从“重新组合”导入{compose，withProps}；
进口{
用ScriptJS，
用谷歌地图，
谷歌地图，
标记
}从“谷歌地图反应”；
常量MyMapComponent=compose(
用道具({
谷歌地图网址：
“api密钥”，
加载元素：，
集装箱运输：，
mapElement：
}),
用ScriptJS，
用谷歌地图
)（道具=>(
{props.ismarkersown&&(
)}
));
导出默认的MyMapComponent；

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

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

从“/myMap”导入MyMapComponent；
常量联系人=（）=>{
返回(
)
}

在您的

中，在返回
MyMapComponent
时，请联系
组件，并按照您在地图组件中定义的方式传递道具
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;

从“/myMap”导入MyMapComponent；
常量联系人=（）=>{
返回(
)
}

在地图组件中：

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;

从“React”导入React；
.
.
常量MyMapComponent=compose(
用道具({
googleMapURL：“API密钥”，
加载元素：，
集装箱运输：，
mapElement：
)},
用ScriptJS，
用谷歌地图
)（道具=>(
{props.ismarkersown&&(
)}
));
导出默认的MyMapComponent；
我完全忘了我可以通过lat和lng作为道具，我真是太蠢了。非常感谢。