Question

我正在寻找一种在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事件的顺序不正确，但是不幸的是，我不知道该如何解决。

在此先感谢您的帮助！

Answer 1

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

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

以下代码不会造成麻烦，因为您告诉脚本循环执行，直到i不小于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]项目。

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

1 个答案: