没有使用 Mapbox 和传单在地图上绘制的标记？

Question

我正在尝试根据我收到的服务器数据绘制标记。数据进来了，我可以通过 console.log 转储，同样地，标记也正在创建，因为我也可以通过 console.log 转储它，但唯一的问题是我在地图上看不到标记图.

代码如下：

var pivotsLayer = L.mapbox.featureLayer();

function plotPivots(farm_id){
                $.getJSON('farm/' + farm_id + '/pivots', function(data){
                    $.each(data, function(pivot_i, pivot_item){
                        if(pivot_item.lat != ''){
                            console.log(pivot_item);
                            var marker = L.marker([parseFloat(pivot_item.lat), parseFloat(pivot_item.long)]).addTo(pivotsLayer);
                            console.log(marker);
                        }
                    });
                });
            }

如果我能在控制台日志中看到所有信息，我可能做错了什么？

全部代码：

L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
        var map = L.mapbox.map('map', 'inclanfunk.l4mg4b99', {
            zoomControl: false
        }).setView([-39.67, -69.26], 4);

        // Disable drag and zoom handlers.
        map.dragging.disable();
        map.touchZoom.disable();
        map.doubleClickZoom.disable();
        map.scrollWheelZoom.disable();

        // Disable tap handler, if present.
        if (map.tap) map.tap.disable();

        $(document).ready(function(){
            $('header h2').text('Equipment Map');

            plotDistributorCompanies();

            map.on('click', function(e){
                map.setView([-39.67, -69.26], 4);
                removeFarmsLayers();
                map.addLayer(distributorCompaniesLayer);
                map.addLayer(farmsLayer);
                plotDistributorCompanies();
            });

            var distributorCompanies = false;
            var distributorCompaniesLayer = L.layerGroup().addTo(map);
            var farmsLayer = L.layerGroup().addTo(map);

            var pivotsLayer = L.mapbox.featureLayer().addTo(map);

            function removeDistributorCompaniesLayers(){
                distributorCompaniesLayer.clearLayers();
                map.removeLayer(distributorCompaniesLayer);
            }

            function removeFarmsLayers(){
                farmsLayer.clearLayers();
                map.removeLayer(farmsLayer);
            }

            function plotDistributorCompanies(){
                if(!distributorCompanies){
                    $.getJSON('distributor-companies', function (data) {
                        distributorCompanies = true;
                        $.each(data, function (i, item) {
                            if (item.geojson != '') {
                                var featureLayer = L.mapbox.featureLayer().addTo(distributorCompaniesLayer);
                                $.getJSON('/geojson/' + item.geojson, function (data) {
                                    featureLayer.setGeoJSON(data);
                                    featureLayer.eachLayer(function (layer) {
                                        layer.on('click', function (e) {
                                            map.fitBounds(featureLayer.getBounds());
                                            removeDistributorCompaniesLayers();
                                            plotFarms(item.id);
                                            distributorCompanies = false;
                                        });
                                    });
                                });
                            }
                        });
                    });
                }
            }

            function plotFarms(distributor_id){
                $.getJSON('distributor/' + distributor_id + '/farms', function(data){
                    $.each(data, function(farm_i, farm_item){
                        if(farm_item.geojson != ''){
                            var featureLayer = L.mapbox.featureLayer().addTo(farmsLayer);
                            $.getJSON('/geojson/' + farm_item.geojson, function(data){
                                featureLayer.setGeoJSON(data);
                                featureLayer.eachLayer(function (layer) {
                                    layer.on('click', function (e) {
                                        map.fitBounds(featureLayer.getBounds());
                                        removeFarmsLayers();
                                        plotPivots(farm_item.id);
                                    });
                                });
                            });
                        }
                    });
                });
            }

            function plotPivots(farm_id){
                $.getJSON('farm/' + farm_id + '/pivots', function(data){
                    $.each(data, function(pivot_i, pivot_item){
                        if(pivot_item.lat != ''){
                            console.log(pivot_item);
                            var circle = L.circle([parseFloat(pivot_item.lat), parseFloat(pivot_item.long)], parseInt(pivot_item.radius)).addTo(pivotsLayer);
                            console.log(circle);
                        }
                    });
                });
            }


        });

枢轴返回的数据：

[
{
"id": "4",
"farm_id": "101",
"distributor_id": "2",
"lat": "-68.51074219",
"long": "-28.93124697",
"radius": "100.00",
"brand": "Valley",
"model": "8000",
"coa": "8 5\/8",
"coa_model": "Flexible",
"ndd": "0",
"ddd": "0",
"sprinkler_model": "IWOB",
"sprikler_type": "Flat",
"sprikler_counterweight": "Yes",
"regulator_brand": "Nelson",
"regulator_type": "10 PCI",
"regulator_range": "All Range",
"wheel_size": "14x9x24",
"co_length": "2",
"co_diameter": "3",
"co_drops": "0",
"alignment": "Standard",
"re_brand": "Baldor",
"re_type": "High",
"re_rpm": "34",
"re_relation": "52:1",
"masa_brand": "Valley",
"masa_type": "Fixed",
"masa_relation": "36 RPM",
"spreader_type": "Fixed",
"rotation_time": "",
"sheet": "",
"minimum_working_pressure": "",
"input_voltage": "",
"shut_down_low_voltage": "",
"minimum_voltage": "",
"working_pressure": "",
"shut_down_for_low_pressure": "",
"last_wheel_cycle": "",
"pressuring_time": "",
"pressurization_recon_time": "",
"electical_conn_time": "",
"restart_time": "",
"electrical_board_model": "Basic",
"electrical_board_contactors": "",
"electrical_board_brand": "Weg",
"relay_board": "",
"protections": "",
"main_fuses": "10 amp",
"main_fuses_comment": "",
"panel_fuses": "10 amp",
"panel_fuses_comment": "",
"panel_code": "",
"lightning_arrester_code": "",
"voltage_source_code": "",
"pressure_sensor_code": "",
"created_at": "2015-02-22 11:01:17",
"updated_at": "2015-02-22 11:01:17"
}
]

Answer 1

您没有将 L.mapbox.featureLayer (pivotslayer) 添加到您的映射实例：

var pivotsLayer = L.mapbox.featureLayer();

假设您在名为 map:

的变量中引用了您的地图实例

var pivotsLayer = L.mapbox.featureLayer().addTo(map);
// or
map.addLayer(pivotsLayer);

我试过你的数据：http://plnkr.co/edit/VjijEh?p=preview 你的圆圈最终在南极洲上方大西洋的某个地方。似乎 lat/lng 已被交换 ;) 问题已解决。

没有使用 Mapbox 和传单在地图上绘制的标记？

Markers not plotting on map using Mapbox and leaflet?

jquery

leaflet

mapbox