0
我試圖在打開彈出窗口時在我的傳單地圖上創建幻燈片。我在此基礎上漂亮Mapbox代碼https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/Webmaping Leaflet Library
所以我做了這個代碼，但我有剛剛地圖和..如果有人有一個想法..
<!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> — Map data © <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">« Previous</a>' +
'<a href="#" class="next">Next »</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>
你讓我一天曼努埃爾..我的股票這麼多天。萬分感謝。 – levcoco