在react-google-maps中绘制标记周围的矩形，而不是使用'icon‘

npm install react-google-maps

import React from 'react';
import { withGoogleMap, GoogleMap, Marker, Rectangle } from 'react-google-maps';

const MapWithRectangle = withGoogleMap(props => (
  <GoogleMap
    defaultCenter={{ lat: 37.7749, lng: -122.4194 }} // 设置地图的初始中心位置
    defaultZoom={12} // 设置地图的初始缩放级别
  >
    <Marker position={{ lat: 37.7749, lng: -122.4194 }} /> // 设置标记的位置
    <Rectangle
      bounds={{
        north: 37.78, // 设置矩形的北边界纬度
        south: 37.77, // 设置矩形的南边界纬度
        east: -122.41, // 设置矩形的东边界经度
        west: -122.42 // 设置矩形的西边界经度
      }}
    /> // 绘制矩形
  </GoogleMap>
));

class MyMap extends React.Component {
  render() {
    return (
      <MapWithRectangle
        containerElement={<div style={{ height: '400px' }} />} // 设置地图容器的样式
        mapElement={<div style={{ height: '100%' }} />} // 设置地图的样式
      />
    );
  }
}

ReactDOM.render(<MyMap />, document.getElementById('root'));