reactjs - 如何在 google-map-react 中添加标记

Question

我正在使用 google-map-react NPM 包来创建谷歌地图和标记。我想添加谷歌可见标记来代替图像。

版本：“反应”：“^17.0.2”，“谷歌地图反应”：“^2.1.10”，

问题：我们如何将默认的谷歌地图标记添加到地图中？

import React from 'react';
import GoogleMapReact from 'google-map-react';
import {key } from './const.js'

const Marker = () => (<div><img src="./images/pin.png" alt="wrapkit"/></div>);
const key = key
const  getMapOptions = (maps) => {

  return {
      streetViewControl: true,
     // scaleControl: true,
      fullscreenControl: true,
      styles: [{
          featureType: "poi.business",
          elementType: "labels",
          stylers: [{
              visibility: "off"
          }]
      }],
      //disableDoubleClickZoom: true,
      mapTypeControl: true,
      mapTypeId: maps.MapTypeId.SATELLITE,
      mapTypeControlOptions: {
          style: maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: maps.ControlPosition.BOTTOM_CENTER,
          mapTypeIds: [
              maps.MapTypeId.ROADMAP,
              maps.MapTypeId.SATELLITE,
              maps.MapTypeId.HYBRID
          ]
      },

      zoomControl: true,
  };
}
function GoogleMap({ latitude, longitude }) {
  const center = {
    lat: latitude,
    lng: longitude
  };
  const apiIsLoaded = (map, maps) => {
    if (map) {
        map.setOptions({ gestureHandling: 'greedy', mapTypeControl: false, minZoom: 2});
    }
  };
  const zoom = 15;
  return (
    <div style={{ height: '30vh', width: '100%', border: "2px solid #edf2f9", borderRadius: "5px", padding: "5px" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key }}
        defaultCenter={center}
        defaultZoom={zoom}
        options={getMapOptions}
        
        >
        <Marker
          lat={latitude}
          lng={longitude}
        />
      </GoogleMapReact>
    </div>
  );
}

export default GoogleMap;