Javascript ReactJs传单标记位置问题

我试图在我的reactjs项目中添加一张带有传单的地图，并希望在地图上显示车辆的位置。我为这个做了一个示例用法。但当我在地图上使用marker时，我看到了（正如你在这张图中看到的）：

马克的左上侧粘在我的位置上。我想看到标记的底部在我的位置的中心，因为圆圈是。但我做不到。我阅读了react传单文档，但没有看到用于此的参数。如果你能帮助我，我很感激。谢谢

import React, { Component } from 'react'
import Leaflet from 'leaflet';
import { Map, CircleMarker, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = Leaflet.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

class SimpleExample extends React.Component {
  constructor(props) {
    super();
    this.state = {
      lat: 39.9653301,
      lng: 32.7760817,
      zoom: 5,
      markerPoint: {
        x: 320,
        y: 192
      }
    };
    this.refMap = React.createRef();
  }

  render() {
    const { lat, lng, zoom } = this.state;
    const position = [lat, lng];
    return (
      <Map ref={this.refMap} center={position} zoom={zoom}   style={{ height: '400px', width: '100%' }}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />
        <Marker position={position} draggable="True" pane="popupPane" >
        </Marker>
        <CircleMarker
        center={position}
        color='green'
        fillColor='red'
        radius={20}
        fillOpacity={0.5}
        stroke={false}
>
            <Popup>
              <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
            </Popup>
      </CircleMarker>
      </Map>
    );
  }
}

export default SimpleExample;

import React，{Component}来自“React”
从“传单”进口传单；
从“反应传单”导入{Map、CircleMarker、tillelayer、Marker、Popup}
输入“传单/目录/传单.css”；
从“传单/dist/images/marker icon.png”导入图标；
从“传单/dist/images/marker shadow.png”导入iconShadow；
让DefaultIcon=传单.icon({
iconUrl：图标，
shadowUrl:iconShadow
});
传单.Marker.prototype.options.icon=默认图标；
类SimpleExample扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
拉脱维亚：39.9653301，
液化天然气：32.7760817，
缩放：5，
标记点：{
x:320，
y:192
}
};
this.refMap=React.createRef（）；
}
render（）{
const{lat，lng，zoom}=this.state；
常数位置=[lat，lng]；
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
);
}
}
导出默认的SimpleExample；

定义正确的尺寸，标记将放置在正确的位置

let DefaultIcon = Leaflet.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: icon,
  shadowUrl: iconShadow
});

---

我已经做好了准备。再次感谢你。