0

我是一个真正的 javascript 新手，我需要一些帮助才能在 koken（摄影师的 CMS）中正确集成 mapbox 地图

这个想法是做一些像这样的事情https://www.flickr.com/map在地图上呈现图片。

现在我的代码如下所示：

<div id='map' style="height: 800px;"></div>
<script>
var map = L.mapbox.map('map', 'mymap')
    .setView([48.895513333333, 2.39237], 6);

//loop to create markers    
<koken:load limit="30" source="contents">
    <koken:loop>

                L.mapbox.featureLayer({
                type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [
                          {{ geolocation.longitude }},
                          {{ geolocation.latitude }} 
                        ]
                    },
                    properties: {
                        'title' : '{{ content.title }} <br/> <a href="{{ content.url }}">Voir la photo</a>',
                        'marker-size': 'large',
                        'marker-color': '#CC0001',
                        'marker-symbol': 'camera'
                    }
                }).addTo(map);


    </koken:loop>
</koken:load>
</script>

我的问题是：

  • 我正在做一个循环来在地图上添加一个又一个标记，这是一个好方法吗，创建一个变量的循环是一个更好的方法吗？
  • 我的 koken 图书馆的一些图像没有，{{ geolocation.longitude }}或者{{ geolocation.latitude }}当这个字段为空时，地图不会显示下一个标记。然后我尝试通过执行过滤if( ) { }，但我失败了。就像说我是新手......有人可以展示如何实现这一目标吗？
  • 我试图将 koken:load 限制增加到 100，每件事都吓坏了……有什么想法吗？我是否必须等待循环完成才能继续？

非常感谢那些愿意帮助我的人！

4

1 回答 1

0

我可以这样做：

<div id='map' style="height: 800px;"></div>
<script>
var map = L.mapbox.map('map', 'mymap')
    .setView([48.895513333333, 2.39237], 6);

// Array containing markers datas
var points = new Array();

//koken loop to populate markers datas
<koken:load limit="30" source="contents">
    <koken:loop>
    points.push({
        cLng:       {{ geolocation.longitude }} +0, // hack to add empty coordinate
        cLat:       {{ geolocation.latitude }} +0,
        title:  "{{ content.title }}",
        url:    "{{ content.url }}"
    });
    </koken:loop>
</koken:load>
// JS Loop thru markers datas to create markers on map
    for(var idx in points) {
        // Only for non empty coordinates
        if((points[idx].cLng != 0) && (points[idx].cLat != 0)) {
                L.mapbox.featureLayer({
                type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [
                          points[idx].cLng,
                          points[idx].cLat
                        ]
                    },
                    properties: {
                        'title' : points[idx].title +' <br/> <a href="'+points[idx].url+'">Voir la photo</a>',
                        'marker-size': 'large',
                        'marker-color': '#CC0001',
                        'marker-symbol': 'camera'
                    }
                }).addTo(map);
        }
    }
</script>

PS：我不知道koken所以不知道你的最后一个问题。

于 2014-06-19T10:08:03.060 回答