React-leaflet：默认标记在缩放时移动
菲利普波斯·桑塔曼尼斯
我正在创建一个使用react-leaflet在地图上显示标记的Ionic React项目。我按照文档中的说明开始使用，尽管所有内容都能完美呈现，但默认示例标记在放大/缩小时一直在移动。以下是相关代码：
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='© <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>
);
CSS的mapId是这样的：
#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/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
我到处都找过一个答案的地方和不断弹出的是事物iconAnchor和iconSize问题的用户尝试使用自定义图标为自己的标记时面对的问题。我什至尝试通过使用默认标记的属性创建一个自定义图标来使用默认标记来执行此操作。那也不起作用。您的帮助将不胜感激。
UPDATE这是使用默认标记时实时项目的外观（未完全放大时标记仍不正确）
吉卜赛人
“标记”图标图像和...“图块图层”图像都在缩放！
您有适用于所有的CSS规则<img>，因此会干扰Leaflet Tile Layer图片：
img {
margin-top: -2rem;
margin-bottom: -4rem;
}
更改缩放级别时，可以巧妙地看到效果：新的图块与上一次缩放的图块没有完全覆盖相同的地理特征。
禁用这些规则后，“平铺层”将正常运行，并且标记的视差效果会大大降低...但不会完全消除，因为...
...您的标记图标图像还具有奇怪的iconAnchor设置，具体取决于您的缩放级别：
const markerIcon = new Icon({
iconUrl: "/assets/icon/location.svg",
iconSize: [50, 50],
iconAnchor: [25, zoom > 15 ? 50 : 68 + defaultZoom - zoom]
});
这可能是为了补偿低倍缩放下的图块移动，但在解决了先前的问题后，似乎适得其反。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
单击React Leaflet v.3.x中的标记时，如何动态更改地图缩放？
- 2
如何在react-leaflet中动态移动和旋转标记？
- 3
在react-leaflet上通过useRef数组移动一些标记
- 4
React-leaflet：如何更新标记位置？
- 5
React Leaflet-标记图像无法加载
- 6
React Leaflet-标记图像无法加载
- 7
react-google-maps 多个标记在打开时中断
- 8
如何让人类标记在地图上移动？
- 9
单击标记时不显示react-leaflet Popup
- 10
React Leaflet：动态标记，无法读取属性“ addLayer”
- 11
react-leaflet在标记旁边添加标签/弹出窗口
- 12
React-Leaflet-将绘图列表映射到标记
- 13
在React上滚动时如何移动Button？
- 14
使用React Typescript在react-leaflet-markerclusterer中显示所有群集标记
- 15
使用React Typescript在react-leaflet-markerclusterer中显示所有群集标记
- 16
SVG线标记在IE中的缩放比例不同
- 17
使地图标记在某些缩放级别出现/消失
- 18
导出默认类时出错 - React
- 19
UITableView复选标记在滚动时消失
- 20
React Leaflet按键警告
- 21
无法在React-Leaflet中获得自定义缩放按钮
- 22
无法在React-Leaflet中获得自定义缩放按钮
- 23
缩放以适合leaflet.js标记
- 24
缩放以适合leaflet.js标记
- 25
Leaflet：每次地图移动或缩放时都会重置图层复选框状态
- 26
如何设置传单地图的缩放比例以显示React传单中的所有标记？
- 27
React Leaflet-如何使用圆形标记渲染自定义图像
- 28
React Leaflet：将对象从MongoDB获取到Leaflet映射作为标记（使用node.js和express）
- 29
React Leaflet：将对象从MongoDB获取到Leaflet映射作为标记（使用node.js和express）
我来说两句