Question

我有一张使用传单实时的地图。

我像github上的描述那样实时设置传单。并且在示例中的url工作得非常好，但是当我直接使用json字符串时，我将收到以下错误消息：

SyntaxError：JSON.parse：JSON数据第1行第1列的意外字符undefined leaflet-realtime.min.js：4：3695

代码如下所示：

var geojsonFeature = {"geometry": {"type": "Point", "coordinates": [-64.90913344523922, 31.274686201725011]}, "type": "Feature", "properties": {}};


    var map = L.map('map', 
        {
            center: [<?php echo $StartNorth; ?>, <?php echo $StartEast; ?>],
            zoom: <?php echo $StartZoomLevel; ?>,
            layers: [BasemapAT_basemap, geoJSONLayerNone],

            zoomControl: false,

            contextmenu: true,
            contextmenuWidth: 200,
            contextmenuItems: [{
                text: 'Koordinaten anzeigen',
                callback: showCoordinates
            }, {
                text: 'Karte hier zentrieren',
                callback: centerMap
            }, '-', {
                text: 'Zoom in',
                icon: 'assets/leaflet-contextmenu/dist/images/zoom-in.png',
                callback: zoomIn
            }, {
                text: 'Zoom out',
                icon: 'assets/leaflet-contextmenu/dist/images/zoom-out.png',
                callback: zoomOut
            }]
        }
    )
        realtime = L.realtime({
        geojsonFeature,
        //url: 'https://wanderdrone.appspot.com/',
        crossOrigin: true,
        type: 'json'
    }, {
        interval: 3 * 1000,
            pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                'icon': L.icon({
                    iconUrl: 'leaflet/images/marker-icon-vehicle.png',
                        iconSize:       [16, 16],
                        iconAnchor:     [1, 8],
                        popupAnchor:    [7, 0]
                })
            });
        }}).addTo(map);

理论它应该有效，但我无法解释自己为什么不这样做。任何人都可以给我一个提示吗？

Answer 1

文档声明：

来源可以是以下之一：


包含从
获取数据的URL的字符串
传递给fetch以获取数据的选项对象

一项功能，以防您需要更多自由。

如果你使用一个函数，该函数应该采取两个回调   参数：fn（成功，错误），回调：


以GeoJSON为参数的成功回调：成功（   功能）

应该采用错误对象和错误的错误回调   message（string）作为参数：error（错误，   消息）

根据文档，您尝试的内容无效。你可以使用一个函数来做到这一点。另外还有：

update(<GeoJSON> featureData?)

您可以使用哪种方法传递数据。

Answer 2

结论是，传单实时接缝是一个伟大的项目，但对我不起作用。

因此我创建了一个个人解决方案，添加和删除L.geoJSON图层：

    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);
                            }
                        });

            TTJsonLayer.addData(TTvehicleObj);
            TTJsonLayer.addTo(map);

            function refreshTTlayer() {
            if (typeof TTJsonLayer === 'undefined') {
                addTTlayer();
            } else {
                map.removeLayer(TTJsonLayer);
                addTTlayer();
            }
        }

        refreshTTlayer();

        $(document).ready(function() {
            setInterval(refreshTable, 60000);
        });
    }   
}

leaflet realtime：SyntaxError：JSON.parse：意外字符

2 个答案: