Google 地图 API 仅显示 4 个标记中的 3 个？答案

【问题标题】：Google maps API only shows 3 markers out of 4?Google 地图 API 仅显示 4 个标记中的 3 个？
【发布时间】：2016-09-13 12:52:11
【问题描述】：

我有这段代码，多标记设置应该正常工作对我来说很奇怪，因为它应该通过所有这些。

    /*array for locations below */
var locations = [
  ['<h4>Kingsley Recruitment Liverpool <br/><br/> 11th Floor, The Plaza<br/> 100 Old Hall Street <br/> Liverpool <br/> L3 9QJ <br/> <br/> 0151 242 1630</h4>', 53.4109146,-2.9947334999999384],

  ['<h4>Kingsley Recruitment Manchester <br/><br/> Centurion House<br/>129 Deansgate<br/>Manchester<br/>M3 3WR <br/> <br/> 0161 393 9889  </h4>', 53.479798  -2.2479048],

  ['<h4>Kingsley Recruitment London <br><br> Warnford Court <br> 29 Throgmorton Street<br> London <br>  EC2N 2AT <br><br> 0203 817 7030</h4>', 51.5074, 0.1278],

  ['<h4>Kingsley Recruitment Birmingham</h4>', 52.48208 -1.9027578],


  ['<h4>Kingsley Recruitment Leeds <br><br> West One <br> Wellington Street<br>Leeds<br>LS1 1BA <br><br>0113 887 2170 </h4>', 53.8008 , -1.5491]
];

// Setup the different icons and shadows
var iconURLPrefix = 'https://www.google.com/intl/en_ALL/mapfiles/';

var icons = [
  iconURLPrefix + 'marker_black.png',

]
var iconsLength = icons.length;

var map = new google.maps.Map(document.getElementById('MAPS'), {
  zoom: 6,
  center: new google.maps.LatLng(52.6369, -1.1398),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  streetViewControl: false,
  scrollwheel:false,
  panControl: false,
  zoomControlOptions: {
     position: google.maps.ControlPosition.LEFT_BOTTOM
  }
});





var infowindow = new google.maps.InfoWindow({
  maxWidth: 160
});

var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: icons[iconCounter]
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  iconCounter++;

  if(iconCounter >= iconsLength) {
    iconCounter = 0;
  }
}

function autoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  for (var i = 0; i < markers.length; i++) {  
    bounds.extend(markers[i].position);
  }
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}
autoCenter();

【问题讨论】：

哪一个没有显示？最后一个？
['
Kingsley Recruitment Birmingham
', 52.48208 -1.9027578],
您的第二个和第四个在一个字符串中同时包含 lat 和 lng，以空格分隔。 1st 和 3rd 是数组中的两个不同值。它显示 3/5
wowww 这么简单的事情谢谢 ;)
简单的事情总是花费最多的时间。我不知道我自己是怎么发现的。 :D 如果您认为我为您节省了一些时间，请接受我的回答。

标签： javascript arrays google-maps oop

【解决方案1】：

您的数据数组有错误。第二个和第四个数组将 lat 和 lng 作为一个值，尽管其余的（正确地）是两个不同的值。在这些 lat 和 lng 坐标之间添加逗号，你应该没问题。

var locations = [
  ['<h4>Kingsley Recruitment Liverpool <br/><br/> 11th Floor, The Plaza<br/> 100 Old Hall Street <br/> Liverpool <br/> L3 9QJ <br/> <br/> 0151 242 1630</h4>', 53.4109146,-2.9947334999999384],

  ['<h4>Kingsley Recruitment Manchester <br/><br/> Centurion House<br/>129 Deansgate<br/>Manchester<br/>M3 3WR <br/> <br/> 0161 393 9889  </h4>', 53.479798,  -2.2479048],

  ['<h4>Kingsley Recruitment London <br><br> Warnford Court <br> 29 Throgmorton Street<br> London <br>  EC2N 2AT <br><br> 0203 817 7030</h4>', 51.5074, 0.1278],

  ['<h4>Kingsley Recruitment Birmingham</h4>', 52.48208, -1.9027578],


  ['<h4>Kingsley Recruitment Leeds <br><br> West One <br> Wellington Street<br>Leeds<br>LS1 1BA <br><br>0113 887 2170 </h4>', 53.8008 , -1.5491]
];

【讨论】：