传单示例上的聚类标记

Question

直到现在，我一直在尝试像使用传单和 im 一样制作 instagram 照片地图。

你可以在这里看到我的例子

这里我加载了我自己的照片作为标记，我试图让它与集群一起工作但是我发现的每个例子都有一个特定的集群图标。

更准确地说，我正在尝试做这样的事情 http://turban.github.io/Leaflet.Instagram/examples/fancybox-cluster.html

所以在聚类图像上面放上数字。

到目前为止我的代码是这样的

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
        }
    </style>

</head>
<body>
    <div id="map"></div>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.5, -0.09], 4);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [60, 65],
                iconAnchor:   [22, 94],
                popupAnchor:  [-3, -76]
            }
        });

        var greenIcon = new LeafIcon({iconUrl: 'docs/images/1.jpg'}),
            redIcon = new LeafIcon({iconUrl: 'docs/images/2.jpg'}), 
            orangeIcon = new LeafIcon({iconUrl: 'docs/images/3.jpg'});

        L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup(" <img width=250 height:450 src=http://i.imgur.com/ujr7OPC.jpg /> <br /> ").addTo(map);
        L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
        L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);

    </script>
</body>
</html>

编辑 1。所以这个例子使用这一行来加载图像。

L.instagram.cluster('http://turban.cartodb.com/api/v2/sql?q=SELECT * FROM instagram WHERE the_geom %26%26 ST_SetSRID(ST_MakeBox2D(ST_Point(5.727, 59.124), ST_Point(5.924, 59.305)), 4326)', {
        featureGroup: L.instagram.fancybox
    }
    ).addTo(map);

我用这个代码加载我的。

var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [60, 65],
                iconAnchor:   [22, 94],
                popupAnchor:  [-3, -76]
            }
        });

        var greenIcon = new LeafIcon({iconUrl: 'docs/images/1.jpg'}),
            redIcon = new LeafIcon({iconUrl: 'docs/images/2.jpg'}), 
            orangeIcon = new LeafIcon({iconUrl: 'docs/images/3.jpg'});

        L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup(" <img width=250 height:450 src=http://i.imgur.com/ujr7OPC.jpg /> <br /> ").addTo(map);
        L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
        L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);

有什么方法可以将我自己的照片合并到 L.instagram.cluster ???

有人可以帮我举个例子吗？

非常感谢您的宝贵时间。

Answer 1

Leaflet.Photo plugin 不知道您如何填充照片数据。

To make the plugin more versatile, it doesn't deal with AJAX loading or image presentation except the thumbnails on the map. Use your AJAX loader of choice, and simply pass on an array of photo objects to the plugin.

在Picasa example provided on the repo, the author uses reqwest and a JSONP communication, but you are free to implement any communication protocol you like, or even embed / hard code your photos data into your script. E.g. you could place your data in an external JSON file and load it with jQuery getJSON.

唯一的要求是构建至少具有以下属性的对象数组：lat、lon 和 thumbnail.

所以至少你会有这样的东西：

// Prepare the Photo Layer (with clustering).
var photoLayer = L.photo.cluster();

// Prepare the photos data. Use whatever method to build these objects.
var photos = [
    {
        lat: 51.5,
        lng: -0.09,
        thumbnail: 'http://tfeditor.com/map/docs/images/1.jpg'
    },
    {
        lat: 51.495,
        lng: -0.083,
        thumbnail: 'http://tfeditor.com/map/docs/images/2.jpg'
    },
    {
        lat: 51.49,
        lng: -0.1,
        thumbnail: 'http://tfeditor.com/map/docs/images/3.jpg'
    }
];

// Finally add photos into Photo Layer and add to map!
photoLayer.add(photos).addTo(map);

当然，您可能希望有更多的交互性，通常是缩略图标记上的单击事件以打开带有全尺寸照片的弹出窗口。请参阅 repo 示例或下面的 jsfiddle。

演示：http://jsfiddle.net/ve2huzxw/38/

传单示例上的聚类标记

Cluster Markers on leaflet example

javascript

maps

leaflet

markerclusterer