Question

我有这张Google地图，一切正常，但是信息窗口显示为空白...

我尝试使用for循环，但我认为我将其放在错误的位置，因为地图完全空白。我尝试了foreach循环，发生了同样的事情。我也尝试将infowindow变量移到for每个循环中，但是没有运气。

// Map variable
var map;

// Create and style the map
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: new google.maps.LatLng(25.7819743, -80.2006986),
    mapTypeId: 'roadmap',
    styles: [{"featureType":"all","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"},{"color":"#ff0000"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"invert_lightness":!0},{"color":"#ffffff"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":"-46"},{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#d8a361"},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#c48c46"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#c48c46"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#c48c46"},{"lightness":"4"}]}]
  }
);

// Custom Icons
var iconBase = 'img/';

var icons = {
  main: {
    icon: iconBase + 'map-icon.png'
  }
};

// Icon Locations and infowindow content
var locations = [
  {
    position: new google.maps.LatLng(25.7819743, -80.2006986),
    type: 'main',
    content: 'This is a simple test'
  }, {
    position: new google.maps.LatLng(25.6543563, -80.4034173),
    type: 'main',
    content: 'This is a another test'
  }, {
    position: new google.maps.LatLng(25.7589664, -80.4495347),
    type: 'main',
    content: 'This is a just another test'
  }, {
    position: new google.maps.LatLng(25.7905606, -80.3455961),
    type: 'main',
    content: 'This is yet another simple test'
  }, {
    position: new google.maps.LatLng(25.7611357, -80.3293175),
    type: 'main',
    content: 'This is a simple test'
  }, {
    position: new google.maps.LatLng(25.8501614, -80.2520588),
    type: 'main',
    content: 'This is a simple test'
  }, {
    position: new google.maps.LatLng(25.653536, -80.3311367),
    type: 'main',
    content: 'This is a simple test'
  }
];

var infowindow = new google.maps.InfoWindow({
    content: locations.content
  });

// Show all markers
locations.forEach(function(location) {
  var marker = new google.maps.Marker({
    position: location.position,
    icon: icons[location.type].icon,
    map: map
  });

  marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
});
}

Answer 1

只有一个InfoWindow，但是有多个标记，您需要使用该标记的适当内容设置InfoWindow的内容。（此外，locations.content是未定义的，locations是具有.content属性的对象的数组）

// Show all markers
locations.forEach(function(location) {
  var marker = new google.maps.Marker({
    position: location.position,
    map: map
  });

  marker.addListener('click', function() {
      infowindow.setContent(location.content)
      infowindow.open(map, marker);
  });
});

proof of concept fiddle

代码段：

// Map variable
var map;

// Create and style the map
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: new google.maps.LatLng(25.7819743, -80.2006986),
    mapTypeId: 'roadmap',
  });

  // Icon Locations and infowindow content
  var locations = [{
    position: new google.maps.LatLng(25.7819743, -80.2006986),
    type: 'main',
    content: 'This is a simple test'
  }, {
    position: new google.maps.LatLng(25.6543563, -80.4034173),
    type: 'main',
    content: 'This is a another test'
  }, {
    position: new google.maps.LatLng(25.7589664, -80.4495347),
    type: 'main',
    content: 'This is a just another test'
  }, {
    position: new google.maps.LatLng(25.7905606, -80.3455961),
    type: 'main',
    content: 'This is yet another simple test'
  }, {
    position: new google.maps.LatLng(25.7611357, -80.3293175),
    type: 'main',
    content: 'This is a simple test'
  }, {
    position: new google.maps.LatLng(25.8501614, -80.2520588),
    type: 'main',
    content: 'This is a simple test'
  }, {
    position: new google.maps.LatLng(25.653536, -80.3311367),
    type: 'main',
    content: 'This is a simple test'
  }];

  var infowindow = new google.maps.InfoWindow({
    content: locations.content
  });

  // Show all markers
  locations.forEach(function(location) {
    var marker = new google.maps.Marker({
      position: location.position,
      map: map
    });

    marker.addListener('click', function() {
      infowindow.setContent(location.content)
      infowindow.open(map, marker);
    });
  });
}

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

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

信息窗口显示为空白

1 个答案: