未捕获（承诺中）ReferenceError：信息窗口未定义

Question

我已经在这个问题上苦苦挣扎了一段时间，并在 stackoverflow 和在线上做了一些适当的研究，但还没有弄清楚如何处理和解决这个问题。

我遇到的问题是变量“infowindow”未定义。我认为我已将其重点放在范围界定问题上，但很难找到解决方案。错误消息针对的是这部分源代码：

    //Remove default infowindow styling
    google.maps.event.addListener(infowindow, 'domready', function() {

错误消息“未捕获（承诺中）ReferenceError：infowindow未在initMap中定义”

我假设我必须在全局范围内定义变量“infowindow”，或者至少在函数范围之外定义变量“infowindow”，但我的尝试只是破坏了代码本身。我注意到前面的函数中已经定义了“infoWindow”（注意：大写W），但不确定在哪里放置变量声明？我应该采取什么方法来解决这个问题？

   var map;
     function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: 37.791992, lng: -122.344085},
          zoom: 12,
      //Google maps styling
      styles: [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ]
    });

    //Array of markers
    var markers = [
    {
      coord: {lat:37.791182, lng:-122.198108},
      content: '<img src ="Projects/Public_Art_Project/imgs/IMG_8683.jpg"> 
       <br> <p> MacArthur @ Patterson <br> "A Bear Shaped Hole" <br> 
        Artist: Roger Peet and Rush Santos</p>'

     },
     ];

    //loop through markers
    for(var i = 0; i < markers.length; i++){
      addMarker(markers[i]);
    }

  function addMarker(props){
    var marker = new google.maps.Marker({
       position:props.coord,
       map: map,
       icon:'/Projects/Public_Art_Project/imgs/markerSprayCan.svg'
  });

    //check content
    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      marker.addListener('click', function(){
        infoWindow.open(map, marker);
      });
          }
            }
      //Remove default infowindow styling
    google.maps.event.addListener(infowindow, 'domready', function() {

        var iwOuter = $('.gm-style-iw');

        var iwBackground = iwOuter.prev();

        iwBackground.children(':nth-child(2)').css({'background' : 
         '#252525'});

        var iwmain = iwBackground.children(':nth-child(2)');

        iwBackground.children(':nth-child(4)').css({'display' : 'none'});

        var iwCloseBtn = iwOuter.next();

           });


             };

Answer 1

您的问题是您需要将

domready

事件侦听器添加到每个 您的 InfoWindows。由于每个标记都有一个唯一的

infoWindow

，因此您需要将其添加到每个标记中：

var infoWindow = new google.maps.InfoWindow({
  content: props.content
});
//Remove default infowindow styling
google.maps.event.addListener(infoWindow, 'domready', function() {
  var iwOuter = $('.gm-style-iw');
  var iwBackground = iwOuter.prev();
  iwBackground.children(':nth-child(2)').css({
    'background': '#252525'
  });
  var iwmain = iwBackground.children(':nth-child(2)');
  iwBackground.children(':nth-child(4)').css({
    'display': 'none'
  });
  var iwCloseBtn = iwOuter.next();
});

注意： 我不建议以这种方式修改默认的 google.maps.InfoWindow，当 Google 更改 InfoWindow（看起来确实如此）时，它会中断。最好使用 InfoWindow 的第三方替代品（如 InfoBubble 或 InfoBox）。

概念证明小提琴

代码片段：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 37.791182,
      lng: -122.198108
    },
    zoom: 11,
  });

  //Array of markers
  var markers = [{
    coord: {
      lat: 37.791182,
      lng: -122.198108
    },
    content: '<img src ="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=350" style="height:100px;"><br><p>MacArthur @ Patterson<br>"A Bear Shaped Hole"<br>Artist: Roger Peet and Rush Santos</p>'
  }, {
    coord: {
      lat: 37.7,
      lng: -122.1
    },
    content: '<img src ="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=350" style="height:100px;"><br><p>MacArthur @ Patterson<br>"A Bear Shaped Hole"<br>Artist: Roger Peet and Rush Santos</p>'
  }, ];

  //loop through markers
  for (var i = 0; i < markers.length; i++) {
    addMarker(markers[i]);
  }

  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coord,
      map: map,
    });

    //check content
    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      //Remove default infowindow styling
      google.maps.event.addListener(infoWindow, 'domready', function() {
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();
        iwBackground.children(':nth-child(2)').css({
          'background': '#252525'
        });
        var iwmain = iwBackground.children(':nth-child(2)');
        iwBackground.children(':nth-child(4)').css({
          'display': 'none'
        });
        var iwCloseBtn = iwOuter.next();
      });

      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
    }
  }
};
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>
<div id="map"></div>