Question

到目前为止，我正试图以一种很好的方式制作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不知道如何填充照片数据。

为了使插件更加通用，除了地图上的缩略图外，它不会处理AJAX加载或图像显示。使用您选择的AJAX加载器，只需将一组照片对象传递给插件。

在回购中提供的Picasa example中，作者使用reqwest和JSONP通信，但您可以自由实施任何您喜欢的通信协议，甚至可以将您的照片数据嵌入/硬编码到你的脚本。例如。您可以将数据放在外部JSON文件中，并使用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/

传单上的集群标记示例

1 个答案: