Question

我有一个使用mapbox创建的世界地图。在该地图上，我想显示我的跑步/骑行/远足路线。这些路线（折线）的数据存储在数据库中。根据用户选择的活动（跑步，骑行，远足...），我调用ajax请求（php文件）以用所需的路线提供地图。该地图可以正确显示，但地图上没有路线。 php文件返回正确的json数据（已通过JSONLint测试）。现在，如果我复制了php文件返回的数据，并在我创建地图的javascript中手动复制了数据，而不是使用ajax请求，则所有路由都会正确显示。我无法弄清楚我的ajax request / php文件出了什么问题。

这是我的JavaScript：

mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/dudanesk/ck9yhkakw2f3a1imzd1qpbs6a',
    center: [0, 20],
    zoom: 1.25,
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const athleteID = urlParams.get('athleteID');

$.ajax({
    url: "test.php",
    type: "POST",
    proccessData: false,

    dataType: "JSON",
    success: function (json) {
        map.on('load', function(){
            // Add a new source from our GeoJSON data 
            map.addSource('route', {
                type: 'geojson',
            data: json
            });

            // Create layer from source
            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': 'red',
                    'line-width': 2
                }
            });
        });
    },
    error: function(xhr, status, error){
        var errorMessage = xhr.status + ': ' + xhr.statusText
        alert('Error - ' + errorMessage);
    },
});

这是我的php文件：

<?php

    require 'dbConnection.php';
    require 'polyline/polyline.php';

    $activityType = array(1,2,3,4,5,6);
    $athleteID = 17177373;
    $conditionActivityType = ' WHERE athleteID='. $athleteID . ' AND (type=' . implode(" OR type=",$activityType) . ")";

    $data = array();
    $getActivities = $conn->query("SELECT * FROM activity" . $conditionActivityType . " ORDER BY startingTime DESC");
    if ($getActivities->num_rows > 0) {
        while($row = $getActivities->fetch_assoc()) {
            $encoded = $row['map'];
            $points = Polyline::decode($encoded);
            $points = Polyline::pair($points);
            array_push($data, array('type' => 'feature', 'properties' => array('id' => $row['id'], 'distance' => $row['distance']), 'geometry' => array('type' => 'LineString', 'coordinates' => $points)));
        }
    };

    $data2 = array('type' => 'FeatureCollection', 'features' => $data);


    echo json_encode($data2);

?>

这是我的php文件返回的内容（该php文件中的实际数据集实际上比我在这里显示的要大得多，但我尝试保持更简短）：

{"type":"FeatureCollection","features":[{"type":"feature","properties":{"id":"3469242458","distance":"26705.70"},"geometry":{"type":"LineString","coordinates":[[-121.01634,38.88842],[-121.0166,38.88837],[-121.0165,38.88885],[-121.01657,38.88854],[-121.01702,38.88821],[-121.0174,38.88817],[-121.01779,38.8883],[-121.01785,38.88724],[-121.01803,38.88673],[-121.01889,38.88537],[-121.01896,38.8848],[-121.0192,38.88443],[-121.01911,38.88348],[-121.01844,38.88206],[-121.01834,38.88094],[-121.01847,38.88015],[-121.0197,38.87861],[-121.0212,38.87797],[-121.02142,38.87756],[-121.02279,38.87742],[-121.02389,38.87717],[-121.02426,38.87643],[-121.02408,38.87526],[-121.02314,38.87406],[-121.02332,38.87359],[-121.02379,38.87343],[-121.02393,38.87314],[-121.02389,38.87177],[-121.02449,38.87099],[-121.02469,38.87048],[-121.02405,38.87035],[-121.02312,38.86992],[-121.02238,38.8687],[-121.02218,38.86783],[-121.02154,38.86731],[-121.02182,38.8671],[-121.02249,38.8662],[-121.02329,38.86612],[-121.02439,38.86629],[-121.02457,38.86618],[-121.02459,38.86526],[-121.02501,38.86435],[-121.02539,38.8631],[-121.02528,38.86292],[-121.02544,38.86256],[-121.02538,38.86242],[-121.02483,38.86223],[-121.02456,38.86197],[-121.02448,38.86152],[-121.0251,38.86085],[-121.02599,38.86021],[-121.02641,38.86028],[-121.02724,38.85993],[-121.02867,38.85972],[-121.02995,38.8597],[-121.0307,38.85981],[-121.03137,38.85926],[-121.03378,38.8581],[-121.03489,38.85776],[-121.03509,38.85781],[-121.03544,38.85756],[-121.03624,38.85729],[-121.03737,38.85725],[-121.03856,38.8565],[-121.03864,38.85628],[-121.0382,38.85597],[-121.03862,38.85627],[-121.03858,38.85648],[-121.03877,38.85658],[-121.03899,38.85717],[-121.03891,38.85839],[-121.0387,38.85884],[-121.03913,38.85938],[-121.03911,38.8601],[-121.0398,38.86228],[-121.04014,38.86262],[-121.04061,38.86405],[-121.04136,38.86492],[-121.04166,38.86494],[-121.04244,38.86538],[-121.04351,38.86554],[-121.04528,38.86507],[-121.04668,38.86438],[-121.04755,38.86368],[-121.04773,38.86284],[-121.04816,38.8624],[-121.0481,38.86218],[-121.04832,38.86187],[-121.0488,38.86191],[-121.04875,38.86238],[-121.04911,38.8631],[-121.04861,38.86389],[-121.04883,38.86467],[-121.04857,38.86519],[-121.04877,38.86543],[-121.04831,38.86594],[-121.04825,38.8662],[-121.04743,38.8668],[-121.04596,38.86701],[-121.04562,38.86722],[-121.04521,38.86725],[-121.0452,38.8675],[-121.04544,38.86772],[-121.04544,38.86831],[-121.04578,38.86838],[-121.04601,38.86826],[-121.04637,38.86842],[-121.04624,38.86908],[-121.04683,38.86963],[-121.04689,38.86991],[-121.04626,38.87008],[-121.04556,38.86995],[-121.04493,38.87004],[-121.04514,38.87039],[-121.04502,38.87084],[-121.04518,38.87104],[-121.04502,38.87128],[-121.04421,38.87086],[-121.04268,38.87132],[-121.04159,38.87137],[-121.04133,38.87162],[-121.04123,38.87205],[-121.04093,38.87224],[-121.03987,38.87212],[-121.03951,38.87242],[-121.03873,38.8722],[-121.03863,38.87227],[-121.03892,38.87261],[-121.03934,38.87291],[-121.03898,38.87367],[-121.03849,38.87338],[-121.03773,38.87335],[-121.03704,38.87347],[-121.03644,38.8738],[-121.03587,38.87404],[-121.0351,38.87416],[-121.03562,38.8742],[-121.0358,38.87435],[-121.0356,38.87484],[-121.03564,38.87665],[-121.03654,38.8772],[-121.03563,38.87665],[-121.03558,38.87618],[-121.03564,38.87646],[-121.03709,38.87621],[-121.03875,38.87679],[-121.03979,38.87695],[-121.04072,38.8774],[-121.04162,38.87832],[-121.0425,38.87864],[-121.04342,38.87933],[-121.04484,38.8798],[-121.04655,38.8806],[-121.04703,38.88061],[-121.04727,38.88028],[-121.04695,38.87985],[-121.04761,38.87968],[-121.04868,38.88005],[-121.05072,38.88001],[-121.05129,38.88025],[-121.05181,38.88105],[-121.05247,38.88111],[-121.05336,38.88096],[-121.05383,38.88114],[-121.05433,38.88155],[-121.05501,38.88148],[-121.05538,38.88119],[-121.05518,38.88085],[-121.05304,38.87999],[-121.0517,38.87855],[-121.05176,38.87842],[-121.05199,38.87845],[-121.0525,38.8789],[-121.0534,38.87939],[-121.05294,38.87869],[-121.05279,38.87824],[-121.05295,38.87812],[-121.05347,38.87855],[-121.05376,38.87789],[-121.05403,38.87842],[-121.05424,38.87852],[-121.05411,38.87808],[-121.05417,38.87776],[-121.05438,38.87769],[-121.05496,38.87816],[-121.0556,38.87847],[-121.05635,38.8786],[-121.05709,38.87832],[-121.05776,38.8787],[-121.05806,38.87928],[-121.05896,38.88026],[-121.05978,38.88062],[-121.0604,38.88124],[-121.06064,38.88187],[-121.0605,38.88246],[-121.05982,38.88303],[-121.059,38.88335],[-121.05855,38.88347],[-121.05749,38.88342],[-121.0565,38.88384],[-121.05458,38.8843],[-121.05264,38.88505],[-121.05214,38.88504],[-121.0505,38.88467],[-121.0495,38.88501],[-121.04913,38.88474],[-121.0495,38.88498],[-121.04923,38.88501],[-121.04839,38.88465],[-121.04664,38.88501],[-121.04634,38.88491],[-121.04531,38.88403],[-121.04476,38.88374],[-121.04357,38.88351],[-121.04251,38.88379],[-121.0435,38.883],[-121.04276,38.88247],[-121.04197,38.8813],[-121.04165,38.88121],[-121.0421,38.88263],[-121.04178,38.88304],[-121.04094,38.88356],[-121.0406,38.8836],[-121.03967,38.88404],[-121.03921,38.8841],[-121.03754,38.88387],[-121.03701,38.88358],[-121.03675,38.88419],[-121.03638,38.88405],[-121.03622,38.88366],[-121.03638,38.88422],[-121.0358,38.88495],[-121.03566,38.8855],[-121.03529,38.8855],[-121.03377,38.88607],[-121.03273,38.88659],[-121.03191,38.88654],[-121.03107,38.88691],[-121.03057,38.88753],[-121.03094,38.88804],[-121.03144,38.8884],[-121.03138,38.88868],[-121.03201,38.89091],[-121.0317,38.89197],[-121.03153,38.89387],[-121.03285,38.89647],[-121.03343,38.89803],[-121.03346,38.89859],[-121.03369,38.89877],[-121.03409,38.89864],[-121.03463,38.89874],[-121.03494,38.89907],[-121.03576,38.89953],[-121.03638,38.90042],[-121.0364,38.90072],[-121.03701,38.90114],[-121.03719,38.90179],[-121.03757,38.90233],[-121.03737,38.90247],[-121.03733,38.90237],[-121.03738,38.90249],[-121.0369,38.90276],[-121.03663,38.90342],[-121.03686,38.90394],[-121.0363,38.90463],[-121.03617,38.90511],[-121.03559,38.90566],[-121.03554,38.90624],[-121.03595,38.9066],[-121.03606,38.90712],[-121.03584,38.90664],[-121.03558,38.90649],[-121.03536,38.90678],[-121.03454,38.90722],[-121.03455,38.90739],[-121.03434,38.90746],[-121.03354,38.90665],[-121.03299,38.90667],[-121.03262,38.90731],[-121.03277,38.90763],[-121.03248,38.90808],[-121.03219,38.90831],[-121.03111,38.90871],[-121.0303,38.90877],[-121.03056,38.90894],[-121.03097,38.90948],[-121.03114,38.91057],[-121.03094,38.91081],[-121.0304,38.91079],[-121.02944,38.91052],[-121.02881,38.91003],[-121.02858,38.90961],[-121.02767,38.90888],[-121.02675,38.9084],[-121.02665,38.90819],[-121.02697,38.90776],[-121.02694,38.90726],[-121.02588,38.90762],[-121.0266,38.90687],[-121.02661,38.90617],[-121.02645,38.90589],[-121.02695,38.90585],[-121.02728,38.90563],[-121.02742,38.90478],[-121.02704,38.904],[-121.02701,38.90314],[-121.02645,38.90271],[-121.02624,38.90191],[-121.02575,38.90148],[-121.02582,38.90125],[-121.02614,38.90113],[-121.02619,38.90097],[-121.02574,38.9],[-121.02561,38.8992],[-121.02561,38.89878],[-121.02597,38.89825],[-121.02604,38.89653],[-121.02578,38.89618],[-121.02576,38.89573],[-121.02519,38.89539],[-121.02428,38.89537],[-121.02199,38.89444],[-121.02128,38.89392],[-121.02101,38.89334],[-121.02028,38.89246],[-121.01622,38.89245],[-121.01599,38.89135],[-121.01617,38.88991],[-121.01662,38.88961],[-121.01723,38.88964],[-121.01737,38.88952],[-121.01622,38.88933],[-121.01629,38.88825],[-121.01644,38.88828],[-121.0164,38.88839]]}},{"type":"feature","properties":{"id":"3457084890","distance":"32535.80"},"geometry":{"type":"LineString","coordinates":[[-121.06755,38.87265],[-121.06721,38.87217],[-121.06712,38.87089],[-121.06666,38.87014],[-121.06666,38.86905],[-121.06609,38.8685],[-121.06595,38.86884],[-121.0662,38.86843],[-121.06578,38.86849],[-121.06604,38.8682],[-121.06554,38.86803],[-121.06539,38.86777],[-121.06549,38.86754],[-121.06505,38.8675],[-121.06466,38.86772],[-121.06462,38.86714],[-121.06406,38.86731],[-121.06406,38.86679],[-121.06326,38.86698],[-121.06317,38.86666],[-121.06247,38.86706],[-121.06206,38.8665],[-121.06089,38.86603],[-121.06051,38.86623],[-121.0597,38.86507],[-121.06003,38.86467],[-121.05923,38.86316],[-121.06024,38.86212],[-121.06123,38.86171],[-121.06145,38.86122],[-121.06248,38.86058],[-121.06252,38.86035],[-121.06448,38.85994],[-121.06695,38.85994],[-121.06745,38.85974],[-121.06707,38.85994],[-121.06454,38.85985],[-121.06372,38.86005],[-121.06391,38.85988],[-121.06305,38.85932],[-121.06288,38.85793],[-121.06215,38.85702],[-121.06139,38.85659],[-121.06049,38.85551],[-121.05985,38.8534],[-121.06004,38.85268],[-121.05925,38.85226],[-121.05884,38.85146],[-121.05895,38.85116],[-121.05973,38.85066],[-121.05903,38.85],[-121.0594,38.8495],[-121.0588,38.84911],[-121.05877,38.84876],[-121.05906,38.84833],[-121.05949,38.8483],[-121.06012,38.84671],[-121.06172,38.84623],[-121.06304,38.84571],[-121.06371,38.8461],[-121.06392,38.84585],[-121.06436,38.84586],[-121.06453,38.84548],[-121.06544,38.84532],[-121.06595,38.84563],[-121.06646,38.84556],[-121.06701,38.84622],[-121.06745,38.84488],[-121.06792,38.84475],[-121.06842,38.84496],[-121.06984,38.84428],[-121.07019,38.84449],[-121.07051,38.84427],[-121.07098,38.84443],[-121.07201,38.84386],[-121.07289,38.84407],[-121.07301,38.84452],[-121.07315,38.84406],[-121.07372,38.84366],[-121.07534,38.84436],[-121.07523,38.84365],[-121.07702,38.8418],[-121.07769,38.84175],[-121.07759,38.84133],[-121.07829,38.84101],[-121.0783,38.84046],[-121.07977,38.83924],[-121.08037,38.83924],[-121.08113,38.83934],[-121.08076,38.83838],[-121.08153,38.83809],[-121.08158,38.83752],[-121.08321,38.83676],[-121.08345,38.83624],[-121.08433,38.83621],[-121.08474,38.83657],[-121.08522,38.83657],[-121.08602,38.83619],[-121.08701,38.83615],[-121.08803,38.83552],[-121.09035,38.83532],[-121.09128,38.83574],[-121.09227,38.83578],[-121.09206,38.8355],[-121.09209,38.83568],[-121.09238,38.83563],[-121.09223,38.83577],[-121.09267,38.83585],[-121.09385,38.83668],[-121.09427,38.83666],[-121.09403,38.83587],[-121.09351,38.83549],[-121.09275,38.83529],[-121.09232,38.8345],[-121.09137,38.83378],[-121.09061,38.8325],[-121.0912,38.83188],[-121.09079,38.83102],[-121.09111,38.83026],[-121.09088,38.82974],[-121.09131,38.82952],[-121.09205,38.82969],[-121.0923,38.82956],[-121.09196,38.82779],[-121.09051,38.82629],[-121.09083,38.82586],[-121.0896,38.82447],[-121.08919,38.82464],[-121.08853,38.82445],[-121.08817,38.82387],[-121.08715,38.82329],[-121.08723,38.82303],[-121.08785,38.82288],[-121.0879,38.82247],[-121.08759,38.82236],[-121.08736,38.82181],[-121.08766,38.82115],[-121.08651,38.82039],[-121.0881,38.81994],[-121.08846,38.82038],[-121.08926,38.82025],[-121.08975,38.82044],[-121.08961,38.81987],[-121.08996,38.81952],[-121.09071,38.81933],[-121.09227,38.81945],[-121.09348,38.82057],[-121.09292,38.82105],[-121.09295,38.82128],[-121.09319,38.82157],[-121.09389,38.822],[-121.09441,38.82183],[-121.09467,38.82231],[-121.0978,38.82228],[-121.0987,38.8225],[-121.10033,38.82255],[-121.10048,38.82308],[-121.10016,38.82361],[-121.10038,38.82448],[-121.10071,38.82379],[-121.10181,38.82293],[-121.10191,38.82262],[-121.10255,38.82266],[-121.10327,38.82209],[-121.10427,38.8221],[-121.10572,38.82268],[-121.10664,38.8228],[-121.10668,38.82206],[-121.10706,38.8216],[-121.10847,38.82144],[-121.10892,38.82111],[-121.10866,38.82034],[-121.10935,38.81967],[-121.10922,38.81935],[-121.10992,38.81915],[-121.10964,38.81869],[-121.11013,38.81838],[-121.11013,38.81783],[-121.11048,38.81756],[-121.11005,38.81697],[-121.11107,38.8164],[-121.11053,38.81565],[-121.11087,38.81499],[-121.11038,38.815],[-121.11011,38.81475],[-121.10973,38.81344],[-121.10928,38.81286],[-121.10843,38.8128],[-121.10834,38.81313],[-121.10815,38.81307],[-121.10752,38.8122],[-121.10773,38.81147],[-121.10701,38.81104],[-121.1072,38.81063],[-121.107,38.80983],[-121.10608,38.80981],[-121.10595,38.80952],[-121.10549,38.80958],[-121.10501,38.80914],[-121.10441,38.80895],[-121.10485,38.80719],[-121.1042,38.80721],[-121.1036,38.80644],[-121.10366,38.80611],[-121.10413,38.8062],[-121.10518,38.80576],[-121.10488,38.80533],[-121.10492,38.80445],[-121.10638,38.80294],[-121.10683,38.80278],[-121.10734,38.80195],[-121.10704,38.8001],[-121.10802,38.79911],[-121.10748,38.79771],[-121.10803,38.7973],[-121.10804,38.79679],[-121.10834,38.79675],[-121.10814,38.79535],[-121.10843,38.79496],[-121.10926,38.79456],[-121.1095,38.79388],[-121.10925,38.79363],[-121.10966,38.79282],[-121.10919,38.79148],[-121.10932,38.791],[-121.10876,38.79008],[-121.10956,38.78811],[-121.11011,38.78772],[-121.11057,38.78772],[-121.11104,38.78716],[-121.11112,38.7865],[-121.11147,38.78612],[-121.1122,38.7863],[-121.11251,38.78554],[-121.11319,38.78538],[-121.11313,38.78488],[-121.11362,38.78428],[-121.1135,38.78374],[-121.11412,38.78301],[-121.1142,38.78317],[-121.11569,38.78275],[-121.11613,38.78276],[-121.11665,38.78328],[-121.11729,38.78268],[-121.11812,38.78254],[-121.11782,38.78162],[-121.11847,38.78106],[-121.12056,38.7813],[-121.12168,38.78178],[-121.12171,38.78264],[-121.122,38.78306],[-121.12285,38.78222],[-121.12442,38.78191],[-121.12435,38.78066],[-121.12466,38.78058],[-121.12511,38.77993],[-121.12579,38.78014],[-121.12581,38.78091],[-121.12675,38.78126],[-121.1273,38.78044],[-121.12843,38.78025],[-121.12856,38.77955],[-121.12964,38.77884],[-121.12971,38.77849],[-121.12911,38.77755],[-121.12833,38.77703],[-121.12823,38.77554],[-121.12851,38.77489],[-121.12801,38.77422],[-121.12991,38.77254],[-121.13111,38.77243],[-121.13294,38.77309],[-121.13378,38.77284],[-121.13367,38.7723],[-121.13268,38.77153],[-121.13302,38.77099],[-121.13274,38.76993],[-121.13311,38.76899],[-121.13359,38.76906],[-121.13437,38.76879],[-121.13458,38.76813],[-121.13412,38.76761],[-121.1333,38.7675],[-121.13313,38.7672],[-121.13322,38.76681],[-121.13403,38.76676],[-121.13398,38.76637],[-121.13487,38.76617],[-121.13435,38.76568],[-121.13466,38.76531],[-121.13431,38.765],[-121.13457,38.76463],[-121.13306,38.76369],[-121.13338,38.7639],[-121.13465,38.76392],[-121.13487,38.76381],[-121.13383,38.76341],[-121.13453,38.76345],[-121.13496,38.7637],[-121.1351,38.76347],[-121.13587,38.7638],[-121.13617,38.76407],[-121.13698,38.7641],[-121.13753,38.76448],[-121.13934,38.76456],[-121.13924,38.76479],[-121.13976,38.76496],[-121.14069,38.76473],[-121.14146,38.76514],[-121.14211,38.76522],[-121.14323,38.76589],[-121.14363,38.76577],[-121.14421,38.76597],[-121.14418,38.76634],[-121.1459,38.76526],[-121.14685,38.76483],[-121.14747,38.76406],[-121.15033,38.75981],[-121.15033,38.75948],[-121.15101,38.75908],[-121.14987,38.75714],[-121.15054,38.75637],[-121.15063,38.75477],[-121.15009,38.75395],[-121.14999,38.7527],[-121.1502,38.75099],[-121.15054,38.75034],[-121.15044,38.7494],[-121.15101,38.74857],[-121.15067,38.74779],[-121.1507,38.74589],[-121.15173,38.74344],[-121.15431,38.7433],[-121.16121,38.74349],[-121.16905,38.74336],[-121.16883,38.74326]]}}]}

谁能看到为什么路线不会出现在我的地图上？我没有任何错误信息。感谢您的时间和帮助

Answer 1

好的，我想我已经解决了。看来，如果我在启动ajax查询之前将map.on('load', function(){移到了我的代码中，而不是将其包含在我的ajax成功函数中，那么我的代码就可以正常工作了：

map.on('load', function(){
    $.ajax({
        url: "test.php",
        type: "POST",
        proccessData: false,
        dataType: "JSON",
        success: function (json) {
            //alert(JSON.stringify(json));
            // Add a new source from our GeoJSON data 
            map.addSource('route', {
                type: 'geojson',
                data: json
            });

            // Create layer from source
            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': 'red',
                    'line-width': 2
                }
            });
        },
        error: function(xhr, status, error){
            var errorMessage = xhr.status + ': ' + xhr.statusText
            alert('Error - ' + errorMessage);
        },
    });
});

从Ajax请求发布Feed Mapbox Geojson数据

1 个答案: