react-leaflet 相关问题

我第一次使用传单和反应传单，并在这里使用他们的基本示例并且地图被分成多个部分，其中一半不可见。我第一次使用传单和反应传单并使用他们的基本示例这里地图被分成多个部分，其中一半不可见。 <MapContainer center={[51.505, -0.09]} zoom={13} 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={[51.505, -0.09]}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> 使用的版本是传单：1.9.4 反应传单：4.2.1 反应：18.2.0 您只需要导入leaflet CSS文件并设置MapContainer的高度和宽度，类名为leaflet-container // Component file import "leaflet/dist/leaflet.css" // CSS file .leaflet-container { height: 100vh; width: 100%; } 别忘了安装传单包 npm install leaflet

reactjs leaflet react-leaflet react-leaflet-v4

回答 1 投票 0

React Leaflet 标记图标未显示我的 next.js 应用程序

我正在使用 React leaflet 我的 next.js 应用程序。React Leaflet 标记已损坏（参见图像）。我正在使用自定义市场，但不起作用。我已经整理了一个非常简单的 React / Leaflet 演示，但标记图标是......

reactjs next.js react-leaflet

回答 2 投票 0

ReactJS 同时执行 if 和 else 语句

我正在尝试使用 React Leaflet 构建这个小项目，其中通过在 leaflet-geosearch 搜索栏搜索某个城市，点击它后，应该会弹出一个表单，询问一些信息

reactjs leaflet react-leaflet

回答 1 投票 0

Leaflet for React：将 Leaflet 的覆盖图转换为 Leaflet for React

我有以下用于传单的代码： const TileLayerNOAA = L.TileLayer.extend({ getTileUrl(坐标) { var z = coords.z -2; 如果 (z<0) z=0; return 'https://gis.charttools...

reactjs leaflet overlay react-leaflet

回答 1 投票 0

Leaflet-geosearch 通过 JSON 实现

我遇到了一个问题，无法在搜索字段中连接我的 JSON 列表。我找不到如何正确更改提供程序（const provider = new OpenStreetMapProvider()）的解决方案，以便它

json leaflet react-leaflet r-leaflet react-leaflet-search

回答 1 投票 0

我应该如何迁移现有的Leaflet脚本以上传kml文件以在React-Leaflet中运行

我想知道如何迁移下面的javascript代码（插件）以在React中运行。它允许将 kml 文件上传到以 html 运行的传单，但在 React-Leaflet 中不起作用 https://www.npmjs.com/

reactjs leaflet react-leaflet

回答 2 投票 0

如何从react-leaflet打印图像？

我正在尝试从反应传单地图打印图像，你有解决方案吗？函数 MapLeaflet(props) { const [adressArray, setAdressArray] = useState(false); const [位置，setPosition] = 我们...

reactjs leaflet react-leaflet

回答 1 投票 0

react-leaflet 标记点击上的任意功能

React-leaflet 很好地提供了将内容放入标记弹出窗口中的功能。以我的例子为例： ...

reactjs leaflet react-leaflet

回答 5 投票 0

传单上的Circle和CircleMaker有什么区别吗？

传单上的Circle和CircleMaker有什么区别吗？在示例中，唯一的区别看起来像是一个人可能有孩子，但在文档上，两者都允许孩子。那么有什么区别...

leaflet react-leaflet

回答 3 投票 0

反应传单地图加载不完整

多次页面重新加载后有时会出现以下问题：在此输入图像描述浏览器：Firefox、最新版本的 Edge。代码片段：导入 React, {useState, useEffect, useRef} f...

reactjs typescript react-leaflet

回答 1 投票 0

React-leaflet 在 Modal 中无法正确显示

大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了npm install react-leaflet，也在index.html中添加了大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了 npm install react-leaflet，还在index.html [email protected]/dist/leaflet.css 中添加了“ 完整性=“sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=” 跨域=“”/> import React, { useEffect, useRef } from "react"; import PropTypes from "prop-types"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; export const MapModal = ({ lnglat }) => { const mapRef = useRef(null); useEffect(() => { // Clean up the map instance when the modal is closed return () => { if (mapRef.current) { mapRef.current.remove(); } }; }, []); return ( <div id='MapModal' className='modal'> <div className='modal-content'> <MapContainer center={[48.0196, 66.9237]} zoom={5} style={{ height: "50vh", width: "100%" }} ref={mapRef} > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' /> <Marker position={lnglat}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </div> </div> ); }; MapModal.propTypes = { lnglat: PropTypes.array, }; 请帮我解决这个问题吗？将此添加到导入中import 'leaflet/dist/leaflet.css';我遇到了同样的问题，这解决了它。你需要添加一个中间组件来等待引导模态完成初始化，即从你的主组件中添加一个中间组件，在中间组件中你必须设置一个设置的超时时间，例如： useEffect(() => { setTimeout(function() { setShowMap(true); }, 2000); }, [isShowMap]); //In the return: { showMap ? < CustomMap lat = { lat } lng = { lng } setlat = { setlat } setlng = { setlng } />: < div > < /div> }

reactjs modal-dialog materialize react-leaflet

回答 2 投票 0

如何在React Leaflet中使用SVG组件？

我将创建的 svg 转换为组件。我将颜色和字符串或整数表达式作为道具发送到其中，并且我想相应地创建一个动态标记。我希望我的 svg 图标出现...

javascript reactjs leaflet react-leaflet leaflet-routing-machine

回答 2 投票 0

在 React Leaflet 的地图中找到我的位置

我想问我是否使用 React Leaflet (https://react-leaflet.js.org/) 中的地图，但如何向地图添加位置按钮？就像我在图像中添加的“位置我”按钮的示例一样...

javascript reactjs react-leaflet

回答 3 投票 0

react-leaflet 相关问题

最新问题