[英]When i click on the marker, the pop up doesn't appear. I get the following error
I tried copy pasting the error and found a resource but i am literally unable to understand what it is. 我试着复制粘贴错误并找到了资源,但我实际上无法理解它是什么。 I'm stuck with this pop up issue, do help me out with it.
我坚持这个弹出问题,帮我解决这个问题。 I'm attaching the snippet of my code along with the error that pops out in the console log.
我正在附加我的代码片段以及控制台日志中弹出的错误。
snippet: 片段:
for (var i=0; i<quakePoints.length; i++) {
var lon = quakePoints[i][1];
var lat = quakePoints[i][0];
var popupText = quakePoints[i][2];
var markerLocation = new L.LatLng(lat, lon);
var marker = new L.marker(markerLocation);
marker.bindPopup(popupText).addTo(map);
}
Error: 错误:
leaflet.js:7 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at e._updateContent (leaflet.js:7)
at e.update (leaflet.js:7)
at e.onAdd (leaflet.js:7)
at e._layerAdd (leaflet.js:6)
at e.addLayer (leaflet.js:6)
at e.openPopup (leaflet.js:7)
at e.openPopup (leaflet.js:7)
at e.togglePopup (leaflet.js:7)
at e.fireEvent (leaflet.js:6)
at e._onMouseClick (leaflet.js:7)
Error- After using leaflet-src.js 错误 - 使用leaflet-src.js后
leaflet-src.js:4046 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at NewClass._updateContent (leaflet-src.js:4046)
at NewClass.update (leaflet-src.js:3974)
at NewClass.onAdd (leaflet-src.js:3899)
at NewClass._layerAdd (leaflet-src.js:2265)
at NewClass.addLayer (leaflet-src.js:1723)
at NewClass.openPopup (leaflet-src.js:4172)
at NewClass.openPopup (leaflet-src.js:4197)
at NewClass.togglePopup (leaflet-src.js:4215)
at NewClass.fireEvent (leaflet-src.js:466)
at NewClass._onMouseClick (leaflet-src.js:3738)
Edit, Attaching sample data 编辑,附加样本数据
var quakePoints = [
[17.123184,79.208824,1.7345],
[19.123184,76.208824,2.7345],
[18.123184,69.208824,2.7345],
[21.123184,70.208824,3.7345],
[23.123184,72.208824,2.6645],
[22.123184,77.208824,1.2245],
[24.123184,85.208824,2.7345],
[18.123184,78.208824,1.7345],
[11.123184,89.208824,1.7345]];
According to your other question, the quakePoints
array looks like: 根据你的另一个问题,
quakePoints
数组看起来像:
var quakePoints = [
[17.123184,79.208824,1.7345],
...
];
Which means that popupText
here ... 这意味着
popupText
在这里......
var popupText = quakePoints[i][2];
...gets the value 1.7345
, but as a Number , not as a String . ...获取值
1.7345
,但作为数字 ,而不是字符串 。
Later, Leaflet is running this piece of code , with the internal parameter content
set to the Number 1.7345
: 稍后,Leaflet运行这段代码 ,内部参数
content
设置为Number 1.7345
:
if (typeof content === 'string') {
node.innerHTML = content;
} else {
// snip
node.appendChild(content);
}
The parameter is not a String , therefore it tries to handle it as a HTMLElement
. 该参数不是 String ,因此它尝试将其作为
HTMLElement
处理。
Please carefully read the definition of the bindPopup
method from the Leaflet API reference : 请仔细阅读Leaflet API参考中
bindPopup
方法的定义 :
bindPopup(<String|HTMLElement|Function|Popup> content, <Popup options> options?)
Binds a popup to the layer with the passed content and sets up the necessary event listeners.
使用传递的内容将弹出窗口绑定到图层,并设置必要的事件侦听器。 If a
Function
is passed it will receive the layer as the first argument and should return aString
orHTMLElement
.如果传递了一个
Function
,它将接收该层作为第一个参数,并应该返回一个String
或HTMLElement
。
Note how the first parameter to bindPopup
has to be a String
, an HTMLElement
, a Function
that returns either a String
or an HTMLElement
, or an instance of Popup
. 注意
bindPopup
的第一个参数必须是String
, HTMLElement
,返回String
或HTMLElement
的Function
,还是Popup
的实例。 You are passing in a Number
, which is none of those, so your issue is actually a case of GIGO . 你传递的是一个
Number
,这些都不是,所以你的问题实际上就是GIGO 。
The approach here would be to ensure that you're passing a String
: 这里的方法是确保你传递一个
String
:
eg with String()
: 例如,使用
String()
:
var popupText = String(quakePoints[i][2]);
or eg with Number.toString()
: 或者例如使用
Number.toString()
:
var popupText = quakePoints[i][2].toString();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.