Информационные окна отображаются пустыми - PullRequest
0 голосов
/ 23 января 2019

У меня есть эта карта Google, и все работает отлично, но информационные окна отображаются пустыми ...

Я пытался использовать цикл for, но, думаю, я его неправильно указалместо, потому что карта просто пуста.Я пробовал цикл foreach, и происходит то же самое.Я также безуспешно пытался переместить переменную infowindow внутри каждого цикла.

// 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);
    });
});
}

1 Ответ

0 голосов
/ 23 января 2019

Существует только один 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);
  });
});

подтверждение концепции скрипки

screenshot of resulting map

фрагмент кода:

// 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...