使用Geojson和坐标表创建点

时间:2017-08-23 10:56:57

标签: javascript function leaflet mapbox geojson

我目前正在使用“飞到基于滚动位置的位置”模板的博客上工作。但是,由于我正在使用它,我有大量的要点。因此,我打算创建一个表格,其中包含要在地图上显示的标记的坐标。但是,我无法获得功能齐全的表格。我可以在我的代码中看到for循环正在运行,但标记不显示。 我知道我必须使用函数来输入参数,但我不知道Geojson是多么的。 你能帮帮我解决这个问题吗?

鲁曼

var tab_coordo = [-5.949547290802002,54.6500264517435,-9.42651,52.97188,-9.465258121490479,51.94015569078675,12.352237701416016, 45.4577225021236];

for (tab_coordo = 0; tab_coordo < tab_coordo.length; tab_coordo++) {
    var geojson ={  
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point", "coordinates": [tab_coordo, tab_coordo++]//ireland cavehills 
        },
            "properties": {
                "title" : "jaimiejourneys",
                "video": ("<iframe src='https://www.instagram.com/p/BWbCDZKA-Nu/embed' width='200' height='200' frameborder='0' scrolling='no'></iframe>")
            }
        },
        ]
    }                   

// add markers to map
geojson.features.forEach(function(marker) {

// create a HTML element for each feature
    var el = document.createElement('div');
    el.className = 'marker';

    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
    .setHTML('<p>' + marker.properties.video + '</p>'))
    .addTo(map);
});     

}

1 个答案:

答案 0 :(得分:1)

它解决了感谢帮助:)

var tab_coordo = [
-5.949547290802002, 54.6500264517435,
-9.42651,52.97188,
-9.465258121490479,51.94015569078675,
12.352237701416016, 45.4577225021236
12.411632537841797, 45.488298185683945
];
var coordo= tab_coordo.length;
for (var inc = 0; inc < coordo; inc=inc+2) {    
//var inc_coordo = inc;
var geojson ={  
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point", "coordinates": [tab_coordo[inc], tab_coordo[inc+1]]
            },
            "properties": {
                "title" : "jaimiejourneys",
                "video": ("<iframe src='https://www.instagram.com/p/BWbCDZKA-Nu/embed' width='200' height='200' frameborder='0' scrolling='no'></iframe>")
            }
        },
        ]
}