Javascript MapBox GLJS-标记为';在使用for循环创建时显示

Javascript MapBox GLJS-标记为';在使用for循环创建时显示,javascript,for-loop,mapbox,mapbox-gl,Javascript,For Loop,Mapbox,Mapbox Gl,我正在使用MapBox GL JS API,并尝试通过一个包含标记数据数组的数组来创建一组标记。当我遍历数据并将其打印到控制台时,它不会出错。当我运行下面的代码时,也没有错误,但是标记没有显示出来。我需要修复/更改什么才能显示标记 我的代码: if (!mapboxgl.supported()) { alert("Your browser does not support Mapbox GL!"); } // map initialization var map = n

我正在使用MapBox GL JS API,并尝试通过一个包含标记数据数组的数组来创建一组标记。当我遍历数据并将其打印到控制台时,它不会出错。当我运行下面的代码时,也没有错误,但是标记没有显示出来。我需要修复/更改什么才能显示标记

我的代码:

if (!mapboxgl.supported()) {
  alert("Your browser does not support Mapbox GL!");
}

// map initialization
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-121.91, 37.7], // starting position [lng, lat]
  zoom: 6 // starting zoom
});

// test marker
var marker = new mapboxgl.Marker({
  color: "#FFFFFF",
  draggable: false
  }).setLngLat([-121.91, 37.7])
  .setPopup(new mapboxgl.Popup().setHTML("<h3>Dublin, CA</h3>"))
  .addTo(map);

// import markers for all the restaurants
// separate colors for "clean" restaurants and "violation" restaurants
// info needed from csv files: id#, restaurant name, cords, and violation type (if applicable)

var mapdata = [[2359228,'MINGHIN STRETEREVILLE',41.89246018674152,-87.62203678900627], [2356848,'OASIS FRESH FOOD INC.',41.93297686391123,-87.64149608965117], [2356434,'SIMPLY THALIA',41.88342263701489,-87.62802165207536]];
var mapdatalength = mapdata.length;

for (var i = 0; i < mapdatalength; i++) {
  var marker = new mapboxgl.Marker({
    color: "#e74c3c",
    draggable: false
    }).setLngLat([mapdata[i][2], mapdata[i][3]])
    .setPopup(new mapboxgl.Popup().setHTML(mapdata[i][1]))
    .addTo(map);
}
if(!mapboxgl.supported()){
警报(“您的浏览器不支持Mapbox GL!”);
}
//地图初始化
var map=new mapboxgl.map({
容器:'映射',//容器id
风格:'mapbox://styles/mapbox/streets-v11“,//样式URL
中心:[-121.91,37.7],//起始位置[lng,lat]
缩放:6//开始缩放
});
//测试标记
var marker=新的mapboxgl.marker({
颜色:“FFFFFF”,
可拖动:错误
}).setLngLat([-121.91,37.7])
.setPopup(新的mapboxgl.Popup().setHTML(“加利福尼亚州都柏林”))
.addTo(地图);
//为所有餐厅导入标记
//“干净”餐厅和“违规”餐厅的不同颜色
//csv文件中需要的信息:id#、餐厅名称、跳线和违规类型(如果适用)
var mapdata=[2359228,'Mingin Stratereville',41.89246018674152,-87.62203678900627],[2356848,'OASIS FRESH FOOD INC.,41.93297686391123,-87.64149608965117],[2356434,'SIMPLY THALIA',41.88342263701489,-87.6280216527536];
var mapdatalength=mapdata.length;
对于(var i=0;i
这似乎是一个问题,标记是使用类“.mapboxgl marker”创建的,但是它没有任何样式,因此如果添加以下CSS,您应该能够看到标记

.mapboxgl-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: red;
}

我想你的代码中已经切换了纬度和经度。试着把它们颠倒过来,看看是否有效。你需要切换经度和纬度。这将把标记放在正确的位置

我将CSS添加到我的CSS文件中,没有任何更改,我仍然看不到标记。其他人已经说过了,但是谢谢!