react-leaflet相关内容

如何从react-leaflet标记传递和获取其他数据/值?

我正在使用react-leaflet向地图添加一组标记.目前,我可以使用自定义图标在地图上显示标记.如何为每个标记添加数据记录.我假设我必须以某种方式创建自定义标记类?现在有没有人可以将数据记录添加到每个标记或至少一个索引中? 这是到目前为止的代码: import'react'中的React,{组件};从'react-leaflet'导入{Map,TileLayer,Marker};从' ..
发布时间:2021-05-29 20:14:44 其他开发

使用 react-leaflet 时缺少 Leaflet Map Tiles

我正在使用简单示例从传单反应的准系统中 create-react-app 应用程序. 问题::地图图块确实可以渲染,但是总是有1-2行的地图图块不渲染(显示为灰色).地图四处移动时,不同的行将开始消失. 问题出在哪里,我们该如何解决? 使用 react-leaflet v2.2.1和 leaflet 1.4.0.在Chrome浏览器和Brave浏览器上存在相同的问题. Ma ..
发布时间:2021-05-29 20:14:19 前端开发

React Leaflet:动态添加标记

如何在React-Leaflet映射中动态添加标记? 我想在用户点击地图时添加新标记.而且我无法正常工作. 从'react'导入React,{组件}从'react-dom'导入{render};从'react-leaflet-control'导入控件;从'react-leaflet'导入{Map,Marker,Popup,TileLayer,ZoomControl,ScaleControl ..
发布时间:2021-05-29 20:13:16 其他开发

如何在api调用时使用react-leaflet添加多个标记?

在我之前的问题中, MapContainer,TileLayer,Marker,Popup .. React Leaflet 如何添加多个地点标记 用例是,当自行车从一个地方到另一个地方行驶时,我需要显示骑自行车者所行驶的距离上的市场. 解决方案 这里是示例.在 MapsComp 上: 声明状态变量以跟踪标记 在comp挂载时获取标记并将其保存到变量 在 Ti ..
发布时间:2021-05-29 20:12:28 其他开发

从打字稿文件中的"react-leaflet"向MapContainer添加"onClick"功能

在Typescript文件中,我无法从"react-leaflet"中导入"Map",而无法通过"MapContainer"轻松地对其进行修复.但是,我需要向其中添加"onClick"功能,但是"MapContainer"不支持"onClick".我遵循了文档,但是却导致了新问题/其他问题……我只需要添加一个简单的onClick函数,以使用户能够在此类地图上用鼠标单击来标记位置.有人知道一个简单的 ..
发布时间:2021-05-29 20:11:30 其他开发

如何解决错误“无法编译:./node_modules/@react-leaflet/core/esm/path.js 10:41模块解析失败:意外的令牌(10:41)".

我正在尝试与传单一起创建 react-typescript 应用.我使用了命令, npm install leaflet react-leaflet @ types/react @ types/leaflet --save 来安装依赖项. 但是当我启动应用程序时,它说, ./node_modules/@react-leaflet/core/esm/path.js 10:41模块解析 ..
发布时间:2021-05-19 19:20:48 前端开发

如何防止事件在React-Leaflet Map的子对象上冒泡

我有一个反应传单地图,我正在渲染 div 里面. 由于某种原因,与div的内容进行交互会导致下方的地图做出响应(例如:双击将缩放地图,拖动将平移地图)-即使我正在调用 e.stopPropagation()在div附加的处理程序中. 据我了解,调用 stopPropagation()应该可以防止DOM事件到达地图本身. 为什么似乎会忽略 stopPropagation()? ..
发布时间:2021-05-02 20:15:22 前端开发

带react-leaflet的自定义标记图标

我尝试了我在网上找到的所有东西,包括Stackoverflow和Github,但我仍然做不到. 我想用一个自定义图标创建一个自定义标记,但是在下面的代码中,我总是遇到错误:'TypeError:options.icon.createIcon不是一个函数' 这是我的代码(文件夹路径中没有错误,所有内容都在src/js或src/img中) Icon.js import L fr ..
发布时间:2020-11-26 02:42:04 其他开发

弹出反应单张地图库

我正在使用react-leaftlet地图库 https://react-leaflet.js.org /en/在我的react应用程序中,并且我已经在地图上绘制了一些标记,并且当用户单击标记时,会出现一个弹出窗口.当用户也单击我的地图区域时,我也想打开一个类似的弹出窗口.我怎样才能做到这一点?以下是我的代码,用于使用弹出窗口渲染标记. (地图使用geojson数据呈现) markerHos ..
发布时间:2020-11-13 18:39:07 前端开发

React-leaflet自定义组件-上下文未传递?

我正在为react-leaflet编写一个自定义组件。这是一个可编辑的弹出窗口,具有其他一些功能。 此处是一个codeandbox 。 此处。此示例仅从我的项目中的.js文件从“ my-react-leaflet-popup-plugin” 导入EditablePopup。效果很好。 我正在尝试使用webpack将其捆绑为一个节点模块,以便其他人可以使用它。它编译没有问题。您可以看到我的we ..
发布时间:2020-10-13 06:19:03 其他开发

如何从坐标数组渲染L.featureGroup

如何从 data.json 中的 coordinateRoute 数组中呈现 L.featureGroup ,以使用按钮“ Snake it! ”,就像我点击“蛇!”一样。拥有自己的 id ,地图将显示带有相应 id 的ordinateRoute的折线 此处为代码链接 这是data.json: 链接data.json 要更特别是,这就是我的方法尝试但错误: 让路线; ..
发布时间:2020-09-24 20:57:24 前端开发

有没有办法使用react-leaflet库使传单弹出窗口响应?

我一直在研究,我知道 leafletjs 具有插件 react-leaflet 有很多第三方插件,但我不知道看不到对我有用的任何东西. 如果有人知道如何做或做过这样的事情,那么如果您能分享的话,那将是很酷的.我很难过这个. 谢谢. 解决方案 安装库,导入js,css获取地图参考,然后呈现标记: import R from "leaflet-responsive-popup"; ..
发布时间:2020-05-29 01:26:58 前端开发

React Leaflet:动态设置GeoJSON的样式

我试图根据其ID是否与选择器匹配来动态更改GeoJSON组件的样式. 该插件的作者引用了传单文档,其中说应该将样式作为函数传递.我在做什么,但没有骰子. 我的组件: import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '. ..
发布时间:2020-04-30 09:24:15 其他开发