React-leaflet：默认标记在缩放时移动

编程问答 2022-05-30

问题描述

我正在创建一个 Ionic React 项目，该项目使用 react-leaflet 在地图上显示标记。我按照文档中的说明开始使用，虽然一切都完美呈现，但默认示例标记在放大/缩小时会继续移动。相关代码如下：

import { MapContainer,Marker as LeafletMarker,Popup,TileLayer } from 'react-leaflet';

...
return (
<MapContainer id="mapId" center={[51.505,-0.09]} zoom={13} scrollWheelZoom={false}>
    <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <LeafletMarker position={[51.505,-0.09]}>
        <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
    </LeafletMarker>
</MapContainer>
);

mapId 的 CSS 是这样的：

#mapId {
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: 0;
}

它在其他所有方面都运行良好，因此似乎没有遗漏任何步骤。我的依赖项如下：

"dependencies": {
"@types/react": "^17.0.0","@types/react-leaflet": "^2.5.2","leaflet": "^1.7.1","react": "^17.0.1","react-dom": "^17.0.1","react-leaflet": "^3.0.5","typescript": "3.8.3"

...

"devDependencies": {
    ...
    "@types/leaflet": "^1.5.19"
},

并且我已经包含了传单文档中的 CSS 和 JS：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

我四处寻找答案，不断出现的问题是用户在尝试使用自定义图标作为标记时面临的 iconAnchor 和 iconSize 问题。我什至尝试通过使用默认标记创建一个自定义图标来使用默认标记来做到这一点。那也没有用。您的帮助将不胜感激。

更新 这是使用默认标记时实时项目的样子（未完全放大时标记仍然不正确）

Map with default pointers

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ionic-frameworkleafletreact-leaflettypescripttypescripttypescript