我想在我的Openlayer地图上有一些坐标

Question

i am trying to get some Dots on my Map with Openlayer. The Maps works fine. I got a JSON file with longitude and latitude and i want them to appear on my map. But it is not working. the parsing wont work somehow.

Error 1:

Error 2:

JSON file: https://github.com/CodeforChemnitz/Haltestellen/blob/gh-pages/haltestellen.json

My Code:

 <div class="main-container-cvag">

        <div id="map" class="map"></div>
        <script src="https://openlayersbook.github.io/openlayers_book_samples/assets/ol3/js/ol.js"></script>
        <script>

            // Declare a Tile layer with an openstreetmap
            var osmLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });
            // latitude and longitude to Chemnitz projection
            var chemnitz = ol.proj.transform([12.9213697, 50.827845], 'EPSG:4326', 'EPSG:3857');

            // Create a View, set it center and zoom level
            var view = new ol.View({
                center: chemnitz,
                zoom: 13
            });

            //source
            var chemnitzStationSource = new ol.source.Vector();

            //dot style
            function dotstyle(feature) {
                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 6,
                        stroke: new ol.style.Stroke({
                            color: 'white',
                            width: 2
                        }),
                        fill: new ol.style.Fill({
                            color: 'green'
                        })
                    })
                });
                return [style];
            }

            //new layer
            var chemnitzStations = new ol.layer.Vector({

                source: chemnitzStationSource,
                style: dotstyle
            })

            //new Map
            var map = new ol.Map({
                target: 'map',
                layers: [osmLayer, chemnitzStations],
                view: view
            });

            $.ajax({

                url: "haltestellen.json",
                dataType: "jsonp",
                crossDomain: true,
                success: function(data) {

                    var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

                    data.items.forEach(function (item) {

                        var feature = new ol.Feature(item);
                        feature.set('url', item.stations);
                        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
                        var geometry = new ol.geom.Point(coordinate);
                        feature.setGeometry(geometry);
                        chemnitzStationSource.addFeature(feature);
                        console.log(parseFloat(item.longitude));

                    });

                }

            });

            map.addLayer(osmLayer);
            // Set the view for the map
            map.setView(view);


        </script>

    </div>

Can someone help me what to do? :)

Answer 1

You are loading JSON, but have dataType: "jsonp" .
Change it to dataType: "json", .