网页制图传单库

Question

我试图在打开弹出窗口时在传单地图上创建幻灯片。我基于这个漂亮的 Mapbox 代码 https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/

所以我做了这段代码，但我只有地图和任何一点。如果有人有想法......

<!DOCTYPE html>
    <html>
    <head>
        <title>Rennes la Belle</title>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>
    <style>
    .popup {
      text-align:center;
      }
    .popup .slideshow .image        { display:none; }
    .popup .slideshow .image.active { display:block; }
    .popup .slideshow img {
      width:100%;
      }
    .popup .slideshow .caption {
      background:#eee;
      padding:10px;
      }
    .popup .cycle {
      padding:10px 0 20px;
      }
      .popup .cycle a.prev { float:left; }
      .popup .cycle a.next { float:right; }
    </style>

    <div id='map'></div>

    <!-- jQuery is required for this example. -->
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
        <script>

            var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
            }).fitBounds([[32.9172730015,-142.145246496],[50.3909078411,-99.83308434]]);
            var Hydda_Full = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
        attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });
        Hydda_Full.addTo(map);

    var geoJson = {
      type: 'FeatureCollection',
      features: [{
          type: 'Feature',
          "geometry": { "type": "Point", "coordinates": [-122.11587572202124, 42.937756819243909]},
          "properties": {
              'title': 'Washington, D.C.',
              'images': [
                ['https://freakplaces.com/img/Cannon_Beach17.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
                ['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
                ['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
              ]
          }
      }, {
          type: 'Feature',
          "geometry": { "type": "Point", "coordinates": [-123.97288585689788, 45.903886579968066]},
          "properties": {
              'title': 'New York City',
              'images': [
                ['https://freakplaces.com/img/Cannon_Beach17.jpg','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
                ['https://freakplaces.com/img/CraterLakeNP14.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
                ['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
              ]

          }
      }]
    };

    // Add custom popup html to each marker.
    L.geoJson('layeradd', function(e) {
            var ratIcon = L.icon({
        iconUrl: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png',
        iconSize: [30,25]
      });
        var marker = L.marker(latlng,{icon: ratIcon});
        var images = feature.properties.images
        var slideshowContent = '';

        for(var i = 0; i < images.length; i++) {
            var img = images[i];

            slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
                                  '<img src="' + img[0] + '" />' +
                                  '<div class="caption">' + img[1] + '</div>' +
                                '</div>';
        }

        // Create custom popup content
        var popupContent =  '<div id="' + feature.properties.title + '" class="popup">' +
                                '<div class="slideshow">' +
                                    slideshowContent +
                                '</div>' +
                                '<div class="cycle">' +
                                    '<a href="#" class="prev">&laquo; Previous</a>' +
                                    '<a href="#" class="next">Next &raquo;</a>' +
                                '</div>'
                            '</div>';

        // http://leafletjs.com/reference.html#popup
        marker.bindPopup(popupContent,{
            closeButton: false,
            minWidth: 320
        });
    });

    // Add features to the map
    L.geoJson.setGeoJSON(geoJson);

    $('#map').on('click', '.popup .cycle a', function() {
        var $slideshow = $('.slideshow'),
            $newSlide;

        if ($(this).hasClass('prev')) {
            $newSlide = $slideshow.find('.active').prev();
            if ($newSlide.index() < 0) {
                $newSlide = $('.image').last();
            }
        } else {
            $newSlide = $slideshow.find('.active').next();
            if ($newSlide.index() < 0) {
                $newSlide = $('.image').first();
            }
        }

        $slideshow.find('.active').removeClass('active').hide();
        $newSlide.addClass('active').show();
        return false;
    });

    map.setView([40, -75], 6);
    </script>
    </body>
    </html>

Answer 1

如果您使用的是 geoJSON，则应使用 onEachFeature。

这里是一个工作示例：

  var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
            }).fitBounds([[32.9172730015,-142.145246496],[50.3909078411,-99.83308434]]);
            var Hydda_Full = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
        attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });
        Hydda_Full.addTo(map);

    var geoJson = {
    "type": "FeatureCollection",
          features: [{
          type: 'Feature',
          "geometry": { "type": "Point", "coordinates": [-122.11587572202124, 42.937756819243909]},
          "properties": {
              'title': 'Washington, D.C.',
              'images': [
                ['https://freakplaces.com/img/Cannon_Beach17.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
                ['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
                ['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
              ]
          }
      }, {
          type: 'Feature',
          "geometry": { "type": "Point", "coordinates": [-123.97288585689788, 45.903886579968066]},
          "properties": {
              'title': 'New York City',
              'images': [
                ['https://freakplaces.com/img/Cannon_Beach17.jpg','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
                ['https://freakplaces.com/img/CraterLakeNP14.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
                ['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
              ]

          }
      }]};



L.geoJson(getData(), {
    onEachFeature: onEachFeature
    }
).addTo(map);


function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.title) {

  var images = feature.properties.images
        var slideshowContent = '';

        for(var i = 0; i < images.length; i++) {
            var img = images[i];

            slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
                                  '<img src="' + img[0] + '" />' +
                                  '<div class="caption">' + img[1] + '</div>' +
                                '</div>';
        }

        var popupContent =  '<div id="' + feature.properties.title + '" class="popup">' +
                                '<div class="slideshow">' +
                                    slideshowContent +
                                '</div>' +
                                '<div class="cycle">' +
                                    '<a href="#" class="prev">&laquo; Previous</a>' +
                                    '<a href="#" class="next">Next &raquo;</a>' +
                                '</div>'
                            '</div>';

        layer.bindPopup(popupContent);
    }
};



    $('#map').on('click', '.popup .cycle a', function() {
        var $slideshow = $('.slideshow'),
            $newSlide;

        if ($(this).hasClass('prev')) {
            $newSlide = $slideshow.find('.active').prev();
            if ($newSlide.index() < 0) {
                $newSlide = $('.image').last();
            }
        } else {
            $newSlide = $slideshow.find('.active').next();
            if ($newSlide.index() < 0) {
                $newSlide = $('.image').first();
            }
        }

        $slideshow.find('.active').removeClass('active').hide();
        $newSlide.addClass('active').show();
        return false;
    });





function getData() { 
return {
    "type": "FeatureCollection",
          features: [{
          type: 'Feature',
          "geometry": { "type": "Point", "coordinates": [-122.11587572202124, 42.937756819243909]},
          "properties": {
              'title': 'Washington, D.C.',
              'images': [
                ['https://freakplaces.com/img/Cannon_Beach17.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
                ['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
                ['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
              ]
          }
      }, {
          type: 'Feature',
          "geometry": { "type": "Point", "coordinates": [-123.97288585689788, 45.903886579968066]},
          "properties": {
              'title': 'New York City',
              'images': [
                ['https://freakplaces.com/img/Cannon_Beach17.jpg','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
                ['https://freakplaces.com/img/CraterLakeNP14.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
                ['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
              ]

          }
      }]};
}

      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    .popup {
      text-align:center;
      }
    .popup .slideshow .image        { display:none; }
    .popup .slideshow .image.active { display:block; }
    .popup .slideshow img {
      width:100%;
      }
    .popup .slideshow .caption {
      background:#eee;
      padding:10px;
      }
    .popup .cycle {
      padding:10px 0 20px;
      }
      .popup .cycle a.prev { float:left; }
      .popup .cycle a.next { float:right; }

<title>Rennes la Belle</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>

    <div id='map'></div>

网页制图传单库

Webmaping Leaflet Library

javascript

slideshow

geojson

leaflet

mapbox