Question

我正在尝试使用Leaflet绘制一张纽约地图，上面有一些标记。我的代码基于本教程：

http://bl.ocks.org/ragnarheidar/a711faa1a94be4dae48f

这是我目前的代码：

<!-- http://data.nycprepared.org/dataset/nyc-community-districts/resource/f990d0e5-2917-4902-a50a-1f6a74cc612b -->

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>NY Noise Map</title>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
            <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        </head>
        <body>
            <div id="map"></div>
        </body>
        <script type="text/javascript">
            var width = 1280,
                height = 960,
                active = d3.select(null);

            /* Map definition */
            // Set map wrapper size
            d3.select('#map')
              .style('width', width + 'px')
              .style('height', height + 'px');

            // Create Leftlet map and center in the desired position
            var map = L.map('map').setView([40.658528, -73.952551], 10);

            // Load a tile layer  
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
            { 
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
                maxZoom: 18, 
                minZoom: 10
            }).addTo(map);

            // Interaction
            var geojson;
            function style(feature) 
            {
                return {
                    fillColor: '#FFEDA0',
                    weight: 1,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7
                };
            }

            function highlightFeature(e) 
            {
                var layer = e.target;

                layer.setStyle({
                    weight: 3,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                });

                if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                }
            }

            function resetHighlight(e) 
            {
                geojson.resetStyle(e.target);
            }

            function zoomToFeature(e) 
            {
                map.fitBounds(e.target.getBounds());
            }

            function onEachFeature(feature, layer) 
            {
                layer.on({
                    mouseover: highlightFeature,
                    mouseout: resetHighlight,
                    click: zoomToFeature
                });
            }

            // Info control

            // Load GeoJSON from an external file
            $.getJSON("Resources/community-districts-polygon.geojson", function(data)
            {
                // Add GeoJSON layer to the map once the file is loaded
                geojson = L.geoJson(data,  
                {
                    style: style,
                    onEachFeature: onEachFeature
                }).addTo(map);
            });

            /* 311 Data */
            //data URL variables
            var start_date = '2013-08-01'; //YYYY-MM-DD
            var end_date = '2013-08-08';   //YYYY-MM-DD
            var c_type = 'Noise';          // Complaint Type

            // Build the data URL
            var URL = "http://data.cityofnewyork.us/resource/erm2-nwe9.json"; // API Access Endpoint
                URL += "?";                                                   // A query parameter name is preceded by the question mark
                URL += "$where=";                                             // Filters to be applied
                URL += "(latitude IS NOT NULL)";                              // Only return records with coordinates
                URL += " AND ";
                URL += "(complaint_type='" + c_type + "')";                    // Desired complaint
                URL += " AND ";
                URL += "(created_date>='" + start_date + "') AND (created_date<='" + end_date + "')"; // Date range
                URL += "&$group=complaint_type,descriptor,latitude,longitude";                        // Fields to group by
                URL += "&$select=descriptor,latitude,longitude,complaint_type";                       // Fields to return
                URL = encodeURI(URL);                                                                 // Encode special characters such as spaces and quotes
                console.log(URL);                                                                       

            var noise_description = ["Air Condition/Ventilation Equipment", 
                                     "Alarms",
                                     "Banging/Pounding", 
                                     "Barking Dog", 
                                     "Car/Truck Horn", 
                                     "Car/Truck Music", 
                                     "Construction Equipment", 
                                     "Construction Before/After Hours", 
                                     "Engine Idling", 
                                     "Ice Cream Truck", 
                                     "Jack Hammering", 
                                     "Lawn Care Equipment",
                                     "Loud Music/Party",
                                     "Loud Talking",
                                     "Loud Television",
                                     "Manufacturing Noise",
                                     "Private Carting Noise"];

            //  Load GeoJSON from an external file
            $.getJSON(URL, function(data)
            {
                var markers = []
                var layers = []
                for (var i = 0; i < noise_description.length; i++) 
                {
                    markers[i] = [];
                }

                var all_markers = [];

                $.each(data, function(index, rec)
                {
                    var marker;
                    for (var i = 0; i < noise_description.length; i++) 
                    {
                        if (rec.descriptor.indexOf(noise_description[i]) > -1) 
                        {
                            console.log(rec.descriptor);
                            marker = L.marker([rec.latitude, rec.longitude]);
                            markers[i].push(marker); 
                            break;
                        }
                        all_markers.push(marker); 
                    }
                });

                // Create layer of all markers but do not add to map
                var all_layers = L.featureGroup(all_markers);       
                // Create specific layers of markers and add to map
                for (var i = 0; i < markers.length; i++) 
                {
                    layers[i] = L.featureGroup(markers[i]).addTo(map);;
                }
                map.fitBounds(all_layers.getBounds());

                // Create object containing all marker layers 
                var overlays = {}; 
                for (var i = 0; i < noise_description.length; i++) 
                {
                    overlay[noise_description[i]] = layers[i];
                }

                //add layer control using above object
                L.control.layers(null,overlays).addTo(map);
            });
        </script>
</html>

但是，除了我的基本地图，我什么都看不到。另外，我收到此错误（无法复制）：

我想知道出了什么问题。

Answer 1

all_markers.push(marker)位于条件块之外，您可以在其中为marker变量指定标记，因此您可以多次推送undefined变量。

L.featureGroup(all_markers)不喜欢接收带有未定义键的数组，这会产生错误消息。

只需在if条件中移动第一条指令：

if (rec.descriptor.indexOf(noise_description[i]) > -1) {
    console.log(rec.descriptor);
    marker = L.marker([rec.latitude, rec.longitude]);
    markers[i].push(marker);
    all_markers.push(marker);
    break;
}

然后您在overlay[noise_description[i]]中输入错误：overlay应为overlays。

演示：http://jsfiddle.net/ve2huzxw/55/

使用传单创建标记图层

1 个答案: