时间戳

首页 > 解决方案 > Google Maps API - 信息窗口中的图像幻灯片

javascript - Google Maps API - 信息窗口中的图像幻灯片

问题描述

我正在寻找一种在 Google Maps API 的信息窗口中创建图像幻灯片的方法。

这是我正在使用的代码 -

var slideIndex = 1;

$(function() {
        initializeMaps();
    });

    function initializeMaps() {

        fetch('./get_locations.php').then(response => {
          return response.json();
        }).then(data => {

          var mapOptions = {
            zoom: 6,
            center: {lat: 48.208411, lng: 16.373471}
          };

          var spots = data;
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          var markers = [];      
          var md5array = [];
          var contentHtml = "";

          for (var i=0;i<spots.length;i++) {
            var infowindow = new google.maps.InfoWindow();

            md5array = spots[i].md5.split(',');

            if(md5array.length > 1) {
                contentHtml = "";

                for(var j=0;j<md5array.length;j++) {
                    contentHtml += '<a href=show_image.php?md5="'+ md5array[j] +'"><img class="mySlides" src="https://www.whatever.com/pics/locations/'+ md5array[j] +'.jpg" width="350px" height="350px" alt="'+ spots[i].location +'" title="'+ spots[i].location +'"></a>';
                }
                contentHtml = '<div>' + contentHtml + '<br><button class="slideshow-button slideshow-button-left" onclick="plusDivs(-1)">&#10094;</button><button class="slideshow-button slideshow-button-right" onclick="plusDivs(1)">&#10095;</button></div>';
            }
            else {
                contentHtml = '<div><a href=show_image.php?md5="'+ spots[i].md5 +'"><img src="https://www.whatever.com/pics/locations/'+ spots[i].md5 +'.jpg" width="350px" height="350px" alt="'+ spots[i].location +'" title="'+ spots[i].location +'"></a><br></div>';
            }

            var spotMarker = new google.maps.Marker({
                position: new google.maps.LatLng(spots[i].lat,spots[i].lng),
                map: map,
                zIndex: 1,
                icon: '/pics/misc/pin.png',
                spotContentHtml: contentHtml,
                location: spots[i].location
            });

            google.maps.event.addListener(infowindow, 'domready', function() {
                showDivs(slideIndex);
            });

            google.maps.event.addListener(spotMarker, 'click', function () {
                console.log(this.spotContentHtml);
                infowindow.setContent(this.spotContentHtml);
                infowindow.open(map, this);
            });

            markers.push(spotMarker);
          }
          var mc = new MarkerClusterer(map, markers, {gridSize: 40}); 

        }).catch(err => {
          console.log(err);
        });
    }

    function plusDivs(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";
    }

基本上，我首先检查每个位置是否有超过 1 个图像。如果没有，我只想展示这张图片。如果有超过 1 个图像，我想创建一个幻灯片。它适用于具有多个图像的位置，但是一旦我单击只有一个图像的标记，我就会收到以下错误消息 -

Uncaught TypeError: Cannot read property 'style' of undefined
at showDivs (locations.php:213)

我认为这是由于我调用 domready 和 click 事件的顺序不正确，但不幸的是我不知道如何解决它。

提前感谢您的帮助！

标签： javascriptgoogle-maps

解决方案

问题来自这一行（我认为因为我没有测试它）：

x[slideIndex-1].style.display = "block";

下面的代码不会造成麻烦，因为您告诉脚本循环 for untili不再小于x.length. 因此，如果x.length为零，则不会发生任何事情，并且您的脚本不会尝试访问不存在对象的属性。

for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";  
}

但是如果你x[slideIndex-1].style.display = "block";不检查是否x[slideIndex-1]对应任何东西，你就会遇到问题。

解决方案：

您可以先检查以下内容的长度x：

if (x.length) {

  x[slideIndex-1].style.display = "block";
}

并确保x[slideIndex-1]存在，即。例如，它最终不会尝试将样式应用于x[-1]项目。

推荐阅读