多个带有标记的谷歌地图组合成滑块

我正在尝试制作一个滑块，其中包含一个带有标记的谷歌地图(每个滑块-不同的城市，上面有一个标记(。我对此完全陌生。我需要使用html，css和js是可选的(这对我来说是一场灾难(

这是我的测试网页的完整代码。滑块的代码是完全有效的，如果我只想使用一个贴图，但需要3个，也可以。我感到奇怪的是，我无法以正确的方式组合和更改JavaScript代码。

function initMap() {
var test= {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 4,
center: test
});
var marker = new google.maps.Marker({
position: test,
map: map1
});
}

function initMap2() {
var test= {lat: 32.794107, lng: 34.988574};
var map = new google.maps.Map(document.getElementById('map2'), {
zoom: 4,
center: test
});
var marker = new google.maps.Marker({
position: test,
map: map2
});
}

function initMap3() {
var test= {lat: 49.2577142, lng: -123.1941149};
var map = new google.maps.Map(document.getElementById('map3'), {
zoom: 4,
center: test
});
var marker = new google.maps.Marker({
position: test,
map: map3
});
}

var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
async defer
src=
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBjCr6Pc36CWZ2t_Y7DmDk-QF2C6uUKZd8&callback=initMap"

.mySlides {display:none}
#map1 {
height: 400px;
width: 100%;
}
#map2 {
height: 400px;
width: 100%;
}
#map3 {
height: 400px;
width: 100%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>My Google Maps Demo</p>
<div class="w3-content">
<div id="map1" class="mySlides"></div>
<div id="map2" class="mySlides"></div>
<div id="map3" class="mySlides"></div>
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
</div>

const locations = [{
lat: 45.840196,
lng: 15.964331,
name: "Zagreb",
desc: "Lorem..."
},
{
lat: 43.514851,
lng: 16.449083,
name: "Split",
desc: "Ipsum..."
},
{
lat: 42.645725,
lng: 18.094058,
name: "Dubrovnik",
desc: "Dolor..."
},
];
let gmap;
let slideIndex = 0; // (Indexes are 0 based, not 1!!!)
const EL_map = document.querySelector('#gmap');
const EL_desc = document.querySelector('#desc');
const ELS_slides = document.querySelectorAll(".slide");
const btnPrev = document.querySelector('#slide-prev');
const btnNext = document.querySelector('#slide-next');
const slidePrev = () => {
slideIndex -= 1;
showSlide();
};
const slideNext = () => {
slideIndex += 1;
showSlide();
};
const mapCenter = (lat, lng) => {
const center = new google.maps.LatLng(lat, lng);
gmap.setZoom(10);
gmap.panTo(center);
};
const showSlide = () => {
// Fix index
if (slideIndex < 0) slideIndex = locations.length - 1;
if (slideIndex > locations.length - 1) slideIndex = 0;
const loc = locations[slideIndex];
// Handle slides
EL_desc.innerHTML = `<h2>${loc.name}</h2> ${loc.desc}`;
// Handle gmap
mapCenter(loc.lat, loc.lng);
};
const appInit = () => {
// INIT GMAP
gmap = new google.maps.Map(EL_map);
const loc = locations[slideIndex];
const infowindow = new google.maps.InfoWindow(); // Only one InfoWindow
function placeMarker(loc) {
const marker = new google.maps.Marker({
position: new google.maps.LatLng(loc.lat, loc.lng),
map: gmap
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent(`<div id="infowindow">${loc.name}</div>`);
infowindow.open(gmap, marker);
});
}
// Pass every location to placeMarker
locations.forEach(placeMarker);
// INIT SLIDES
showSlide();
btnPrev.addEventListener("click", slidePrev);
btnNext.addEventListener("click", slideNext);
}
google.maps.event.addDomListener(window, 'load', appInit);

#gmap {
height: 200px;
}
#infowindow {
padding: 10px;
}
.slide {
display: none;
}
.slide.is-active {
display: block;
}

<div id="gmap"></div>
<button type="button" id="slide-prev">❮ Prev</button>
<button type="button" id="slide-next">Next ❯</button>
<div id="desc"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

相关内容

最新更新

热门标签：