Question

一段时间以来，我一直在努力解决这个问题，并且在这里对stackoverflow和在线进行了一些适当的研究，但是还没有弄清楚如何解决这个问题。

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

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

，显示错误消息“未捕获（承诺）ReferenceError：未在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）。

proof of concept fiddle

代码段：

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" type="text/javascript"></script>
<div id="map"></div>

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

1 个答案: