sql to leaflet js动画标记

时间:2013-11-26 13:48:19

标签: javascript sql json leaflet

我在数据库(SQL)中有一组地理坐标(GPS点),我想访问它并加载到传单线方法。我知道我需要一个中间件来从数据库生成一个json文件,然后在我的脚本中将其用作var,但是当我在行方法中加载使用json文件指定的var时它不起作用。有人可以帮忙吗?

    var apiKey = '4fb2ff96122544b6834c508275d62b25',
                styleID = '997';



var myIcon = L.icon({
    iconUrl: 'img/car.png',
    iconAnchor: [24, 30]
});

var data = L.geoJson ("../json.geojson");


    $(document).ready(function() {

        var sidebar = L.control.sidebar('sidebar', {
            closeButton: true,
            position: 'left'
        });


        //setTimeout(function () {
        //  sidebar.show();
        //}, 500);




            var southWest = new L.LatLng(52.978778, 8.350296),
                northEast = new L.LatLng(53.220733, 9.099426),
                bounds = new L.LatLngBounds(southWest, northEast);

             var latlng = new L.LatLng(53.079296,8.801694);
             var map = new L.Map('map_holder', 
                                {
                                    center: latlng, 
                                    zoom: 10, 
                                    maxBounds: bounds, 
                                    zoomControl: true
                                }); 

            var line = [
                       L.polyline([[53.061047, 8.769021],[53.07162, 8.783612],[53.087707, 8.797774]],{color: 'red'}),
                       L.polyline([[53.057401, 8.963299],[53.059258, 8.898411],[53.071636, 8.863735],[53.079061, 8.82597],[53.077412,8.81979],[53.089372,8.796444],[53.112253,8.81052]]),
                       L.polyline([[53.047863, 8.818846],[53.032426, 8.810177],[53.023193, 8.802109],[53.008838, 8.798676],[53.001607,8.795242],[52.998921,8.784256],[52.995822,8.766232]]),
                       L.polyline([[53.147362, 8.732414],[53.116465, 8.811378],[53.10616, 8.87661],[53.079358, 8.919182],[53.07317, 8.961067],[53.050475, 8.973427],[53.026529,9.018059]])
                       L.polyline([data.getLatLngs])
                    ];

                $.each(line, function(i-1, line) {
                 var animatedMarker = L.animatedMarker(line.getLatLngs(),{
                 icon:myIcon});
                var Marker = L.marker([53.061047, 8.769021],{icon:myIcon}).addTo(map);  
                Marker.bindPopup("I am a Car");
                animatedMarker.bindPopup("I am also a car");



                    map.addLayer(animatedMarker);
                    map.addLayer(line);
                    map.addControl(sidebar);
                    map.on('click', function () {
                        sidebar.show();
                })

            });

1 个答案:

答案 0 :(得分:0)

我相信这一行:

var data = L.geoJson ("../json.geojson");

应该是:

var data = L.geoJson ("../geojson.json");

.geojson不是有效的json文件扩展名。