2017-08-23 57 views
1

我目前正在使用模板「基於滾動位置飛到位置」的博客上工作。但是,由於我使用它的用途,我有大量的要顯示的點。因此,我打算創建一個包含要在地圖上顯示的標記座標的表格。但是,我無法獲得功能齊全的表格。我可以在我的代碼中看到for循環正在運行,但標記不顯示。 我知道我必須使用函數來放置參數,但我不知道Geojson如何。 你能幫我解決這個問題嗎?用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); 
});  

}

+0

'tab_coordo xmojmr

+0

嗨,感謝您的回答 – ruman

+0

是的我同意這部分。我會改變它。我的主要問題是如何使用包含Geojson變量的函數,該變量將表的座標作爲參數?謝謝 – ruman

回答

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>") 
      } 
     }, 
     ] 
}     
相關問題