无法使react-leaflet动态更新标记:它提供了TypeError: cannot read property 'leafletElement‘of undefined
问题描述： 无法使react-leaflet动态更新标记，出现TypeError: cannot read property 'leafletElement' of undefined错误。
解决方案： 这个问题通常是由于在更新标记时未正确引用react-leaflet组件的引用导致的。以下是一些可能的解决方案：
- 确保正确引用react-leaflet组件：
- 确保已正确安装react-leaflet依赖项，并在代码中正确引入相关组件。
- 确保在组件中正确使用react-leaflet组件，例如使用正确的组件名称和属性。
- 检查标记更新的代码：
- 确保在更新标记时，正确地使用react-leaflet提供的API。
- 检查是否正确设置标记的位置、图标、属性等。
- 检查组件的生命周期方法：
- 确保在组件的适当生命周期方法中更新标记，例如componentDidMount、componentDidUpdate等。
- 确保在更新标记时，正确地使用react-leaflet提供的API。
- 检查地图容器的引用：
- 确保地图容器的引用正确传递给react-leaflet组件。
- 确保地图容器的引用在组件中正确使用。
如果以上解决方案仍然无法解决问题，建议查阅react-leaflet的官方文档或社区论坛，寻求更详细的帮助和支持。
腾讯云相关产品推荐： 腾讯云提供了一系列与云计算相关的产品和服务，以下是一些推荐的产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性、可靠的云服务器实例，满足不同规模和需求的应用场景。
- 产品介绍链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高性能、可扩展的云数据库服务，支持MySQL数据库引擎。
- 产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：提供安全、可靠的对象存储服务，适用于存储和处理各种类型的数据。
- 产品介绍链接：https://cloud.tencent.com/product/cos
- 人工智能（AI）：提供丰富的人工智能服务和工具，包括图像识别、语音识别、自然语言处理等。
- 产品介绍链接：https://cloud.tencent.com/product/ai
请注意，以上推荐的产品和链接仅供参考，具体选择和使用需根据实际需求和情况进行。
相关·内容
我使用的是react-leaflet地图，运行时我必须更新标记的方向，我使用的是带有react-leaflet的leaflet-rotatedmarker库。标记方向在加载和重新加载时工作良好，但在收到道具的值后没有更新。
<Marker
key={1}
position={{ lat: position.latitude, lng: position.longitude }}
rotationAngle={position.course}
rotationOrigin="center"
icon={L.icon({
iconUrl: "x
浏览 0提问于2019-07-23得票数 3
回答已采纳
我之所以选择这个插件，是因为它似乎是在地图折线上制作标记动画的最好方法。
它不在npm上，所以我只是从存储库向AnimatedMarker.js添加了module.exports = L.animatedMarker并需要它。
App.js
<AnimatedMarkerElement
route={this.state.route}
map={this.refs.map.leafletElement}
/>
AnimatedMarkerElement.js
require('./AnimatedMarker')
import { MapComponen
浏览 2提问于2016-11-28得票数 0
2回答
我正在使用react-leaflet，我想要一个自定义的标记图标。React-leaflet可以使用Leaflet.Icon对象来显示自定义标记图标。所以我在NPM上安装了leaflet，并添加了import { L } from 'leaflet';。
然后我补充道：
const FPIcon = L.Icon.extend({
options: {
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
}
});
const purpleIcon = new FPI
浏览 2提问于2017-10-06得票数 0
当我点击Marker时，弹出窗口出现。Popup有一个自定义的“关闭”按钮。我想使用这个按钮，而不是右上角的默认"X“。
我已经看到了这两个问题：
popupRef.current._closeButton.click()不是一个选项，因为我想隐藏默认的关闭按钮-当我保留弹出属性closeButton={false}时，它不起作用
当我单击我的按钮时，我得到一个错误TypeError: Cannot read property 'closePopup' of undefined
import React, {useRef} from 'react';
浏览 0提问于2021-05-29得票数 0
我有表格，并且在单个选项卡(rc- tab )中绘制了react-leaflet组件。它们不是相连的，而是Redux。我在表中有带坐标的行。当我单击该行时，坐标被传递到Tab组件中，然后通过道具移动到地图并绘制。 嗯，它们应该是-当我传递带有坐标的整个行数组时-它们被绘制得很好，但是当我传递单个值时-我遇到了一些麻烦。 我有testsData -存储所有行的位置，并根据单击的行来查找索引。当我传递给Map testData时，它绘制得很好。当我尝试在redux的帮助下改变索引时，我得到了一个错误。我使用带有索引的方法，在此之前我使用了另一种方法-我将整个行传给了道具-没有运气。 const
浏览 15提问于2020-04-15得票数 0
我在我的Drupal网站上遇到了以下错误：
caught TypeError: Cannot read property 'version' of undefined
jquery.formalize.js?nkmwqx:13 Uncaught TypeError: Cannot read property 'msie' of undefined
caught TypeError: Cannot read property 'version' of undefined
jquery.formalize.js?nkmwqx:13 Uncaught
浏览 0提问于2015-03-06得票数 3
回答已采纳
2回答
我想对我的软件做一些测试，所以我在网上学习一些教程，并找到实用流星软件包:摩卡。但是在安装软件包并打开本地程序之后(没有编写任何测试)。我收到错误的叫喊：
socket-stream-client.js:100 Uncaught TypeError: _this._launchConnection is not a function
at new ClientStream (socket-stream-client.js:100)
at new Connection (ddp-client.js:435)
at Object.DDP.connect (ddp-clien
浏览 0提问于2018-05-13得票数 0
回答已采纳
1回答
选择和引导的麻烦
、、、
我正在尝试实现可视标记，这是基于Railscasts一集：
由于某些原因，无法找到所选的库(请参阅下面来自javascript控制台的错误)。我也有点担心这些引导错误。
application.js
//= require bootstrap
//= require jquery
//= require chosen-jquery
//= require jquery_ujs
//= require_tree .
application.css
*= require_self
*= require chosen
*= require_tree .
sentences.js.coffee
jQu
浏览 0提问于2013-11-23得票数 0
回答已采纳
1回答
我将jquery无冲突方法定义为这里定义的
但在此之后，我会使用类似的附加配置加载我的页面。
config.paths.jqueryLayout = ["scripts/jquery.layout-1.3.0"];
config.shim.jqueryLayout = {deps: ['jquery']};
config.paths.jqueryUi = ["scripts/jquery-ui-1.10.min"];
config.shim.jqueryUi = {deps: ['jquery']};
现在，在将无冲突添加到tr
浏览 0提问于2013-07-13得票数 0
回答已采纳
我在EC2 (Amazon Web Service) Centos上安装了meteor 1.0版。创建了一个简单的应用程序: meteor create myapp。从web浏览器访问我的应用程序时，我得到了以下信息：
Uncaught TypeError: Cannot read property 'DDP' of undefined follower-livedata.js?74156c6baa89da861fc4ddb58ef158eac71e58e0:24
GET http://www.keenehuynh.com/packages/ddp.js?1f971b2ac9f
浏览 0提问于2014-11-27得票数 0
如何在Android上隐藏“合金/钛”上的动作条。我尝试了以下几点：
$.index.activity.actionBar.hide()
但它只是抛出了一个错误：
Cannot read property 'hide' of undefined
完整的错误消息如下：
[ERROR] : TiExceptionHandler: (main) [1605,1605] ----- Titanium Javascript Runtime Error -----
[ERROR] : TiExceptionHandler: (main) [0,1605] - In /alloy/co
浏览 0提问于2017-03-16得票数 2
回答已采纳
我正在使用Vue.js、TypeScript和aws-iot-device-sdk包，并且喜欢订阅IoT主题。我就是这样创建一个新客户端的：
import AwsIot from 'aws-iot-device-sdk';
import { config } from 'aws-sdk';
client = new AwsIot.device({
region: 'foo',
host: 'foo',
clientId: 'foo',
protocol: 'wss'
浏览 0提问于2019-04-03得票数 1
回答已采纳
从Beta升级到RC1之后，管道似乎无法正确地传递数据。我现收到以下资料：
ORIGINAL EXCEPTION: TypeError: Cannot read property '1' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property '1' of undefined
这是一个古老的柱塞，但它显示了我在我的应用程序中使用管道的方式。
有时我完全没有错误，它把页面当作没有管道一样对待。
浏览 2提问于2016-05-12得票数 4
回答已采纳
我正在尝试执行这个react-leaflet示例：
这是代码：
import * as React from 'react';
import * as leaflet from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup, useMapEvent, useMap, Rectangle } from 'react-leaflet'
import { useEventHandlers } from '@react-leaflet/core'
import &
浏览 19提问于2022-01-16得票数 0
回答已采纳
将Meteor从0.9.0.1升级到0.9.1后，控制台中出现了以下错误：
Uncaught TypeError: Cannot read property 'registerHelper' of undefined
Uncaught TypeError: Cannot read property 'T9n' of undefined
Uncaught TypeError: Cannot read property 'AccountsEntry' of undefined
Uncaught ReferenceError: Template
浏览 2提问于2014-09-05得票数 1
回答已采纳
革命滑块不工作在我的Wordpress网站。它与其他主题一起工作，但不适用于当前运行的主题。
我被告知网站正在抛出这两个错误，这两个错误阻碍了它的工作。
Uncaught TypeError: Cannot read property 'id' of undefined s3Slider.js?ver=1:23
Uncaught TypeError: Cannot read property 'opera' of undefined custom.js?ver=1:16
但是我不知道如何解决这些问题，或者让错误停止，这样滑块才能正常工作。
站点url： - Sl
浏览 1提问于2013-08-08得票数 0
回答已采纳
我目前正在做一个电子托盘应用程序。对于Mac，电子框架具有将应用程序隐藏在码头上的功能。
app.dock.hide();
我试图在Windows机器上运行这个程序，并得到一个错误。
TypeError: Cannot read property 'hide' of undefined
现在，我正在寻找一个类似的功能Windows隐藏在任务栏中的应用程序。
浏览 5提问于2017-09-22得票数 5
回答已采纳
我有一个用来创建聊天的SignalR。它工作得很好，但是当我在母版页中使用它时，它给出了以下错误
Uncaught TypeError: Cannot read property 'chat' of undefined
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
DOMContentLoaded
错误存在于：
<script type="text/javascript">
$(function () {
var chat = $.connection.
浏览 0提问于2013-02-06得票数 2
回答已采纳
3回答
动态计算属性名
、、
computed: {
...mapGetters(['getElements']),
element() {
return this.getElements(this.formId, this.sectionId, this.elementId);
},
[this.element.inputName]: {
},
}
抛出一个错误：Uncaught TypeError: Cannot read property 'element' of undefined
如何动态设置道具名称？
浏览 0提问于2018-11-16得票数 3
回答已采纳
当我尝试运行我的angular应用程序时，我得到了一个错误。我已经安装了nodejs，python，电子，但不能运行应用程序...我在CMD中写了"npm start“命令，但是我得到了一个类似这样的错误：
C:\xampp\htdocs\string-desktop>npm start
npm WARN invalid config registry=""
npm WARN invalid config Must be a full url with 'http://'
npm WARN invalid config registry="
浏览 0提问于2019-03-13得票数 2
配置
controlBar.progressControl: false
controlBar.playbackRateMenuButton: false
会报 Uncaught TypeError: Cannot read property 'getChild' of undefined，
tcplayer.min.js:9 Uncaught TypeError: Cannot read property 'seekBar' of undefined错误。
image.png
image.png
浏览 419提问于2019-09-10
由于更新到13.10，所有铬扩展都会产生错误：
chrome.extension is not available: 'extension' is not allowed for specified context type content script, extension page, web page, etc.). [VM] binding (56):427
Uncaught TypeError: Cannot call method 'sendRequest' of undefined include.preload.js:105
Uncaught T
浏览 0提问于2013-10-18得票数 15
回答已采纳
1回答
是否可以将filesystem作为chrome.permissions.request API请求的可选权限(用于Chrome应用程序)？
我的JS代码包括：
document.getElementById('savebtn').addEventListener('click',
function () {
chrome.permissions.request({ permissions: ["fileSystem"] },
function (granted) {
浏览 1提问于2015-05-19得票数 0
回答已采纳
1回答
我有一个AngularJS应用程序，其中我使用jspdf库。当我用grunt serve运行开发版本时，一切都很好。但如果我使用grunt build构建应用程序，使用uglify，缩小的版本会出现以下错误：
jsPDF PubSub Error Cannot read property 'annotations' of undefined TypeError: Cannot read property 'annotations' of undefined
jsPDF PubSub Error Cannot set property 'pdf'
浏览 15提问于2017-06-30得票数 0
回答已采纳
(长时间用户，第一次海报)
我正在开发一个闪亮的应用程序，它使用传单包。没有导航菜单，我可以使LeafletOutput有100%的高度使用leafletOutput('map', height='100%')。
问题是，当我将这段代码放入navbarPage中时，它将不再工作，并且我的地图将停止显示(下面是控制台错误)。我尝试过通过添加tags$style(type = "text/css", "#map {height: 100%};")来注入CSS代码，但这似乎没有任何效果。如果我将其更改为tags$style(type =
浏览 10提问于2015-07-07得票数 9
1回答
这能在松露合同测试中定义一个函数吗？
在我正在研究的块菌测试场景中，有一个重复而复杂的步骤，我想知道是否有可能组织代码并将重复的步骤放到样板函数中。
我在ecmascript方面的知识有限。我所做的一切都导致了不同的错误。
roundStart(); //TypeError: Cannot read property 'roundStart' of undefined
this.roundStart(); //TypeError: this.roundStart is not a function
this.game.roundStart(); //Ty
浏览 0提问于2018-10-31得票数 0
我的数据库有几个副本(相同的_id)，即使在重新启动和使用autoload: true之后也是如此。这很奇怪，但我决定使用setAutocompactionInterval来解决这个问题，就像中所建议的那样，结果就是TypeError: Cannot read property 'setAutocompactionInterval' of undefined。
const Db = require('nedb-promise')
, curry = new Db({
filename: 'curry'
,
浏览 18提问于2017-12-08得票数 0
回答已采纳
我试图在react中使用react-leaflet-choropleth制作合唱曲。
我的传单很好用。
现在，当我试图使用库加载 (crimes_by_district)时，在通过这些特性进行映射时会出现一个错误，特别是：
Cannot read property 'map' of undefined
我似乎没有准确地引用要映射的正确数组。
我在git中查看了，并在没有运气的情况下尝试了这些建议。我想知道我是否引用了我正在使用的geoJson中的不正确值。
下面是我的代码：
Leaf.js (以App.js表示)
import React, { Component } from
浏览 8提问于2020-12-18得票数 3
回答已采纳
1回答
我需要帮助，使此组件的保存按钮的工作。leaflet.offline包是这样的：
React Typescript。
我正在尝试根据文档扩展react-leaflet。使用createLeafletElement和updateLeafletElement。我没有收到任何错误，但没有任何内容添加到地图中。
我的Layer组件叫做OfflineTileLayer。
下面是组件：
import L from 'leaflet';
import 'leaflet.offline';
import { MapControl, withLeaflet, MapControl
浏览 18提问于2020-05-19得票数 0
所以现在发生的事情是，我试图删除一个特定的资源--一个post。当我点击删除按钮时，它只会引导我到文章的显示视图。
我还有一个WYSIWYG，它运行于不再执行的JavaScript之上。我在我的应用程序文件中包含了JS标记，如下所示：
<%= javascript_include_tag "application" %>
在我的application.js：
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-wysihtml5/b3
//= re
浏览 6提问于2014-04-25得票数 0
当我试图在一个项目中要求Sha256时：
(ns tutorial-client.sha256
(:require
[goog.crypt.Sha256 :as hasher]))
我没有实际的编译错误，但是当我在浏览器中打开clojurescript->js输出时，我确实得到了以下信息。
Uncaught Error: Undefined nameToPath for goog.crypt.Sha256 base.js:586
Uncaught ReferenceError: cljs is not defined rendering.js:7
goog.require co
浏览 1提问于2013-09-17得票数 1
回答已采纳
我正在使用Valence API抓取部门数据，以再次交叉引用RSS提要。该小部件将显示与其自身部门相关的数据。应用程序已部分完成，并可在小部件之外运行
Uncaught TypeError: Cannot read property 'Web' of undefined D2L.LP.Web.Desktop.default.js:2
Uncaught TypeError: Cannot read property 'Web' of undefined D2L.PlatformTools.Homepage.default.js:2
Uncaught Typ
浏览 0提问于2014-02-07得票数 0
1回答
使用rc run将Reaction从1.4.x升级到1.5.x我在Firefox中得到了这个错误：
TypeError: require(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED is undefined
而Chrome中的这些错误：
Uncaught TypeError: Cannot read property 'EventPluginHub' of undefined
Uncaught TypeError: Cannot read property 'marketplaceEnabled'
浏览 0提问于2017-10-30得票数 0
回答已采纳
在更新cli后，我在ngx-timepicker中遇到minutesGap问题
core.js:5967 ERROR TypeError: Cannot read property 'minutesGap' of undefined
at TimepickerDirective.set (ngx-timepicker.directive.ts:94)
浏览 2提问于2020-12-21得票数 1
我有以下next.config.js：
module.exports = withBundleAnalyzer({
i18n: {
locales: ['en', 'es'],
defaultLocale: 'en',
localeDetection: false,
},
...
});
它使区域设置en和es的路由成为默认区域设置。
在项目的根目录中，有_posts/en和_post/es，它们保存动态post页面的.md文件。
当我运行dev脚本"dev": "next dev
浏览 14提问于2022-08-22得票数 0
回答已采纳
试图集成角4+@ngx-翻译。所有东西都在使用npm start正常执行和工作。当我尝试npm test运行Karma测试用例时，会出现问题。所有这些都是在添加了@ngx-翻译功能之后开始的。控制台出现以下错误：
20 09 2017 14:24:30.334:INFO [Chrome 60.0.3112 (Windows 7 0.0.0)]: Connected on socket n1uvSjMzMfCGU26zAAAA with id 7587189
Chrome 60.0.3112 (Windows 7 0.0.0) ERROR
Uncaught TypeError: Cannot
浏览 3提问于2017-09-20得票数 2
我正在使用handsontable和jsfiddle 。我尝试动态加载数据并设置列标题名称。很明显，数据没有加载。当我运行jshint时，我得到：
Uncaught TypeError: Cannot read property 'identifier' of undefined
我该如何解决这个问题呢？
浏览 0提问于2015-01-06得票数 0
2回答
问题有一个很好的包装OverpassLayer OSM的反应-传单。不幸的是，它只适用于反应-传单v1。
import { LayerGroup } from "react-leaflet";
import L from "leaflet";
import OverPassLayer from "leaflet-overpass-layer";
export default class OverpassLayer extends LayerGroup {
componentWillReceiveProps(nextProps) {
浏览 0提问于2019-05-18得票数 0
回答已采纳
我正在尝试使用grunt运行http服务器。但是，当我在适当的目录中输入grunt serve时，会出现以下错误：
Loading "connect_proxy.js" tasks...ERROR
>> TypeError: Cannot read property 'prototype' of undefined
Loading "connect_proxy.js" tasks...ERROR
>> TypeError: Cannot read property 'prototype' of undefi
浏览 2提问于2015-06-26得票数 1
我正在努力让verto在Chrome 57.0.2987.133 (64位)上工作。
在跟踪之后，我能够让webrtc/verto在服务器上工作。我能够得到演示应用程序(在verto回购)连接和打电话。
我跟随在我的终端安装verto，但我得到(Uncaught TypeError:无法读取未定义的属性'srcObject‘和未定义的TypeError:无法读取未定义的属性'sinkId’)。见下文：
Uncaught TypeError: Cannot read property 'srcObject' of undefined
at FSRTCatt
浏览 0提问于2017-04-15得票数 2
回答已采纳
1回答
我有以下的JSFiddle：，我试图设置它来测试一些Kendo图。
我得到以下脚本错误：
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.all.min.js:9
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.dataviz.min.js:10
Uncaught ReferenceError: global is not defined
任何帮助都将不胜感激。
浏览 1提问于2014-01-03得票数 1
回答已采纳
cellValue= worksheet.getRow(1).getCell(1).value；
和cellValue=console.log(worksheet.getCell('A1'))
请在下面找到我的代码：
cellread2=function(){
var Excel;
var filePath = path.resolve(__dirname,'E:/excel.xlsx');
if (typeof require !== 'undefined') {
浏览 9提问于2017-05-24得票数 0
回答已采纳
我尝试添加对我的应用程序来说应该是可选的动态段，首先我不知道它们不能用:param语法可选，并且我开始从我的模板中得到一个奇怪的非描述性错误。
Uncaught TypeError: Cannot read property 'shouldSupercede' of undefined
我花了一个多小时才意识到发生了什么，无论我多么努力地用*param和(: param )使param可选，但我做不到。
这是个大问题。如果有人知道该怎么做，我会非常感激的
浏览 3提问于2014-04-23得票数 1
回答已采纳
我被这个我想做的游戏卡住了。我尝试使用的tilemap有一个错误，声明如下
Error 1: "Phaser.Tileset - image tile area is not an even multiple of tile size"
Error 2: "Uncaught TypeError: Cannot read property '2' of undefined"
Error 3: "Uncaught TypeError: Cannot read property 'type' of undefined"2
浏览 0提问于2015-08-07得票数 6
我正在使用nuxt.js，我在一个页面中得到了这个错误"6b486774c601587bc79c.js:2 TypeError: Cannot read property '_isDestroyed‘of undefined“，当我访问其他页面而不是返回到这个页面时，它就消失了
浏览 39提问于2020-05-11得票数 5
1回答
使过程生成的映射无效
、、、、
我需要使一些react-leaflet映射无效，这些映射是在使用以下代码加载页面后生成的：
maps = [];
mapData = mapData.map(function(assetf,index){
return(
assetf.map(function(asset, index){
var ind = index;
var indHash = "#" + ind;
var indExtra = ind + "ex";
maps.push(indExtra);
浏览 1提问于2017-07-31得票数 0
回答已采纳
我正在尝试使用以下命令将对象转换为json： object.json(); 我得到以下错误： core.js:15713 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'json' of undefined TypeError: Cannot read property 'json' of undefined 我认为这是与新版本相比的一些变化。版本7 有人能帮帮我吗？
浏览 13提问于2019-03-05得票数 0
最近，一些Discord.js用户现在遇到了以下错误：
guild.channels.set(channel.id, channel);
^
TypeError: Cannot read property 'id' of undefined
bughunter Bug:
node_modules\discord.js\src\client\voice\networking\VoiceWebSocket.js:123
server_id: this.connection.channel.guild.id,
浏览 5提问于2021-05-19得票数 2
回答已采纳
当我运行npm start时，我得到
ERROR TypeError: Cannot read property 'version' of undefined
TypeError: Cannot read property 'version' of undefined
这发生在我运行完之后
npm install
我试图通过运行npm -g install npm@version来解决这个问题，但是它却给了我这个错误
npm ERR! code ETARGET
npm ERR! notarget No matching version found for np
浏览 0提问于2020-01-20得票数 7
升级到新版本后，jquery将停止工作。
Uncaught TypeError: Cannot read property 'expr' of undefined
2
Uncaught TypeError: Property 'jQuery' of object [object Window] is not a function www.xxx.si:313
Uncaught TypeError: Property 'jQuery' of object [object Window] is not a function thickbox.js:1
浏览 2提问于2013-01-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
