Question

我正在尝试使用来自公共API调用的数据填充地图框地图，但没有成功。我尝试了很多东西，但由于某些原因，标记没有渲染到地图上。有没有人遇到过类似的问题？

提前谢谢。

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>

Answer 1

我强烈怀疑您正在调用无效的＆＃39;标记符号＆＃39;。在Mapbox Studio中，火箭符号通常带有确定精确样式的数字，例如＆＃39; rocket-11＆＃39;而不仅仅是＆＃39; rocket＆＃39;。

在MapboxStudio中打开您的样式并检查火箭图标的确切名称。

Mapbox标记不会渲染

1 个答案: