javascript - Polymer 1.0/leaflet-map 中动态创建的标记不会在 Firefox 中呈现

Question

我正在尝试使用 Polymer 1.0 和 leaflet-map Web 组件在 map 上的按钮单击事件上的特定点添加标记 - github link 。我的代码在 Chrome 中按预期工作，但在 Firefox 41.0.1 中出现错误:

"TypeError : t is null"

(引用leaflet.js页面)，并且标记不显示。

这是按钮注册中的 Javascript:

var parent = document.getElementById('nycmap');
nycmap.setToPoint(locator.latitude, locator.longitude);

var newMarker = document.createElement('leaflet-marker');

var lat1 = locator.latitude;
var long1 = locator.longitude;

var lat = document.createAttribute("latitude");       
lat.value = lat1; 
var longi = document.createAttribute("longitude");       
longi.value = long1; 
newMarker.setAttributeNode(lat);
newMarker.setAttributeNode(longi);
newMarker.id="marker";

Polymer.dom(parent).appendChild(newMarker);

我也在 Firefox 中收到这些警告，但我不认为这些是此问题的根源:

Use of document.createAttribute() is deprecated. Use element.setAttribute() instead.
Use of setAttributeNode() is deprecated. Use setAttribute() instead.

(我不明白如何使用 element.setAttribute 创建元素，但这是另一个问题)。

Answer 1

你把事情搞混了。使用 setAttribute 对于您想要做的事情来说已经足够了。您需要在刚刚使用 document.createElement 创建的元素上调用它。如果您需要此 HTML:

<leaflet-marker id="marker" latitude="0" longitude="0"></leaflet-marker>

您需要创建一个元素并向其添加三个属性:

var marker = document.createElement('leaflet-marker')

marker.setAttribute('id', 'marker')
marker.setAttribute('latitude', locator.latitude)
marker.setAttribute('longitude', locator.longitude)

Polymer.dom(parent).appendChild(marker)

• https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
• https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute