2017-03-31 117 views
0

我正在尝试使用来自公共API调用的数据填充mapbox地图而没有成功。我尝试了很多东西,但由于某些原因,标记不会呈现在地图上。有没有人遇到类似的问题?Mapbox标记不会渲染

Codepen

预先感谢您。

JS

// Provide your access token 
L.mapbox.accessToken = 'pk.eyJ1IjoiZGllZ29vcmlhbmkiLCJhIjoiY2lvcmQ1ZDRiMDAweXZrbTJ2dmlub2dtaSJ9.1JJGPZzeB3TWfIsTvMvRpA'; 

var coordinates = [] 
var commonName = [] 
geoJson = [] 

//Data 
$.getJSON("https://api.tfl.gov.uk/BikePoint", function(data) { 

    //i = number of loops/val = object 
    $.each(data, function(i, val) { 
    coordinates.push(data[i].lat + ", " + data[i].lon); 
    commonName.push(data[i].commonName); 

    geoJson.push(
    { 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [coordinates[i]] 
     }, 
     "properties": { 
      'Name': commonName[i], 
      'marker-color': '#3ca0d3', 
      'marker-size': 'large', 
      'marker-symbol': 'rocket', 
     } 
    }); 
    }); 
    //console.log(coordinates); 
    //console.log(commonName); 
}); 

var mapSimple = L.mapbox.map('map_simple', 'mapbox.light') 
    .setView([51.494, -0.171], 14); 
var myLayer = L.mapbox.featureLayer().setGeoJSON(geoJson).addTo(mapSimple); 
mapSimple.scrollWheelZoom.disable(); 

console.log(geoJson) 

HTML

<html> 

<head> 
    <meta charset=utf-8 /> 
    <title></title> 
    <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script> 
    <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' /> 

</head> 

<body> 
    <div id='map_simple' class='map'> </div> 
</body> 

</html> 

回答

0

我强烈怀疑,你所呼叫的无效 '标记符号'。在Mapbox Studio中,火箭符号通常带有确定确切样式的数字,例如“火箭11”,而不仅仅是“火箭”。

在MapboxStudio中打开你的风格,并检查你的火箭图标的确切名称。