react-leaflet 相关问题

我正在尝试使用顺风在地图中设置弹出窗口的样式，但样式没有反映。 const 自定义图标 = divIcon({ html: ` 我正在尝试使用顺风在地图中设置弹出窗口的样式，但样式没有反映。 const customIcon = divIcon({ html: ` <svg width="54" height="55" viewBox="0 0 54 55" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_817_1163)"> <path d="M27.0001 54.2632C27.0001 54.2632 8.1001 29.6122 8.1001 19.1632C8.1001 16.6812 8.58896 14.2235 9.53877 11.9305C10.4886 9.63741 11.8808 7.55389 13.6358 5.79887C15.3908 4.04384 17.4743 2.65167 19.7674 1.70186C22.0604 0.752047 24.5181 0.263184 27.0001 0.263184C29.4821 0.263184 31.9398 0.752047 34.2328 1.70186C36.5259 2.65167 38.6094 4.04384 40.3644 5.79887C42.1194 7.55389 43.5116 9.63741 44.4614 11.9305C45.4112 14.2235 45.9001 16.6812 45.9001 19.1632C45.9001 29.6122 27.0001 54.2632 27.0001 54.2632ZM27.0001 24.5632C28.4323 24.5632 29.8058 23.9943 30.8185 22.9816C31.8312 21.9689 32.4001 20.5954 32.4001 19.1632C32.4001 17.731 31.8312 16.3575 30.8185 15.3448C29.8058 14.3321 28.4323 13.7632 27.0001 13.7632C25.5679 13.7632 24.1944 14.3321 23.1817 15.3448C22.169 16.3575 21.6001 17.731 21.6001 19.1632C21.6001 20.5954 22.169 21.9689 23.1817 22.9816C24.1944 23.9943 25.5679 24.5632 27.0001 24.5632Z" fill="#1B1130" /> </g> <defs> <clipPath id="clip0_817_1163"> <rect width="54" height="54" fill="white" transform="translate(0 0.263184)" /> </clipPath> </defs> </svg>`, popupAnchor: [140, 126], }); <MapContainer center={[48.8566, 2.3522]} zoom={10} scrollWheelZoom={false}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[48.8566, 2.3522]} icon={customIcon}> <Popup className=""> <h2 className="">hi how are you?</h2> <p className="">welcome to paris</p> </Popup> </Marker> </MapContainer> 我试图向整个弹出窗口添加背景颜色，但颜色没有反映到整个弹出窗口。您找到解决方案了吗？我也有同样的问题。

next.js leaflet react-leaflet

回答 1 投票 0

如何将react-leaflet地图添加到remixjs应用程序

我正在尝试将反应传单地图添加到混音应用程序中。我使用 npx create-remix@latest 命令创建了一个简单的应用程序。然后我使用安装说明添加了react-leaflet。现在我有...

javascript reactjs leaflet react-leaflet remix.run

回答 1 投票 0

带有react-leaflet的平滑滚动

我正在尝试在我的反应传单项目中创建平滑的缩放。我知道这对于原版传单是可行的，如本文中所述，使用 smoothWheelZoom，但知道原版传单不...

javascript reactjs leaflet react-leaflet

回答 1 投票 0

React-leaflet ImageOverlay 在使用 jspdf 导出的 PDF 中不可见

我正在使用react-leaflet v4.2.1。我用它来显示的不是地图而是这样的自定义图像我正在使用 react-leaflet v4.2.1。我用它来显示的不是地图而是这样的自定义图像 <MapContainer center={[height / 2, width / 2]} crs={crs} bounds={bounds} minZoom={-5} zoomControl={false} attributionControl={false} > <HeatmapLayer /> // component created with leaflet.heat <ZoomControl position='bottomleft' /> <ImageOverlay url={url} bounds={bounds} /> </MapContainer> 工作正常。我想将这张地图导出为 pdf 格式。我正在使用 jspdf 库。 const doc = new JsPDF(); const heatmap = document.getElementById('heatmap-report')!; const data = await html2canvas(heatmap); const img = data.toDataURL('image/png'); const imgProperties = doc.getImageProperties(img); const pdfWidth = doc.internal.pageSize.getWidth(); const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width; doc.addImage(img, 'PNG', 10, 150, pdfWidth - 10, pdfHeight); doc.save('my-file.pdf'); 问题是它只显示 HeatmapLayer 和 ZoomControl，而 ImageOverlay 不可见。我还尝试使用 use-react-screenshot 库，它也只显示 HeatmapLayer 和 ZoomControl。我必须将这个 ImageOverlay 与 HeatmapLayer 一起导出，就像用户在屏幕上看到的那样（因此包括缩放位置等），所以我需要使用传单。你有什么想法我该怎么做吗？我找到了解决问题的方法。我将 base64 而不是 url 作为 url prop 传递给 ImageOverlay 组件。 // before <ImageOverlay url={url} bounds={bounds} /> // now <ImageOverlay url={base64} bounds={bounds} /> 我认为这可能与CORS有关。

reactjs leaflet jspdf react-leaflet export-to-pdf

回答 1 投票 0

更改传单工具提示中的尾部三角形颜色

我正在尝试更改鼠标悬停在传单地图标记引脚上时的工具提示尾部三角形颜色，但我无法检查确切的类名称来覆盖它。有没有办法改变颜色和需要...

javascript typescript leaflet maps react-leaflet

回答 1 投票 0

Leaflet自定义图标，react-leaflet，无法构建Gatsby项目

当我在本地运行 gatsbydevelop 时，我的 Leaflet 地图中的自定义图标工作得很好，但是当我尝试构建时，我收到与自定义标记图标相关的错误： Webpack 错误：类型错误：

leaflet gatsby react-leaflet

回答 2 投票 0

使用react-leaflet中的MapContainer出现问题：TypeError：无法读取null的属性（读取'useState'）

我正在尝试使用 React Leaflet 在我的网站上添加来自 OpenStreetMap 的地图。语法方面一切似乎都很顺利，但是当我尝试使用时遇到此错误：未捕获的类型错误：无法...