Question

我在index.php中设置了一个传单映射，这里我包含一个外部* .js文件，它连接到一个API服务来接收实时数据。必须处理收到的数据，并在外部* .js文件中进行，该文件包含在index.php的标题中

处理后的数据将在地图上显示为刷新标记，并且知道我的目标是通过单击button1跳转到marker1。跳转到标记的灵感来自this fiddle：

var markersById = {}
var TTvehicleObj = {};

function refreshTable(){

   // code which creates TTvehicleObj

    function addTTlayer() {
        TTJsonLayer = L.geoJSON(null, {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: vehicleMarker});
            },
            onEachFeature: function(feature, layer) {
                if (feature.properties.Ignition == 0 && feature.properties.Standstill == 1) {
                        vehicleParking = '<span class="label label-default">P</span>&nbsp;';
                    } else if (feature.properties.Ignition == 1 && feature.properties.Standstill == 1) {
                        vehicleParking = '<span class="label label-primary">P</span>&nbsp;';
                    } else {
                        vehicleParking = '';
                    }
                    layer.bindPopup(vehicleParking+'<strong>'+feature.properties.Funknummer+'</strong>&nbsp;|&nbsp;'+feature.properties.Position);

                    if (feature.properties.id) {
                        markersById[feature.properties.id] = layer;
                    }
                }
            });

        TTJsonLayer.addData(TTvehicleObj);
        TTJsonLayer.addTo(map);
        //map.fitBounds(TTJsonLayer.getBounds());

        $.each(TTvehicleObj.features, function(key, value) {
            //console.log(key+':'+value.properties.id);
            setMarkerButton('"vehicle'+value.id+'"');
        });         

        function setMarkerButton(id) { 
            document.getElementById(id).addEventListener("click", function () {
            map.setView(markersById[id].getLatLng(), map.getZoom());
          });
        }
    }

    function refreshTTlayer() {
        if (typeof TTJsonLayer === 'undefined') {
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer ist nicht vorhanden');
            addTTlayer();
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer wurde erstellt');
        } else {
            map.removeLayer(TTJsonLayer);
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer wurde entfernt');
            addTTlayer();
            console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+' TTlayer wurde aktualisiert');
        }

    }

    refreshTTlayer();

});
}

现在我收到以下错误：

未捕获的TypeError：无法读取null
的属性'addEventListener'

理论我可以向我解释错误，但我不知道如何解决这个问题。

如果我在function setMarkerButton之后尝试移动index.php中的refreshTable，我会收到错误：

未捕获的ReferenceError：未定义setMarkerButton

我想我也可以向自己解释这个错误，但此刻我很困惑，因此我不得不寻求帮助。

事先提前

---编辑---

在包含* .js文件之后的index.php中调用refreshTable。我认为我的一个问题是，时间不正确，TTvehicleObj和其他功能不是全局可用的。

我可以排除我们使用过的双重ID不匹配。

我的问题是，如何从index.php中访问循环setMarker();？

Answer 1

如评论所述，您的问题缺乏细节，以明确您的具体问题。特别是，您试图通过<button>与document.getElementById()联系的HTML。

话虽如此，我非常怀疑你试图撰写的id：

setMarkerButton('"vehicle'+value.id+'"')

...不正确。

如果此ID不正确，document.getElementById(id)会返回null，您无法在其上调用addEventListener，因此会出现错误消息。

您很有可能拥有额外的双引号（"）。
value.id应该是value.properties.id。实际上，您正在遍历GeoJSON特征集（TTvehicleObj.features）。每个功能确实可以有一个id（根据GeoJSON标准），但在您的情况下，您正在访问feature.properties.id以上的几行，因此看起来您的id实际上是一个子properties的成员。

因此，您可能需要将以上行替换为：

setMarkerButton('vehicle'+value.properties.id);

并且<button>（或您使用的实际代码）的id应该是id="vehicle<ID>"，其中<ID>是{{1}中的确切值}}

无法从另一个文件中获取getElementById

1 个答案: