Google 地图标记 - 请问如何显示这些标记

Google Maps Markers - how to get these to show please

我有我的功能齐全的地图,但我不确定为什么我不能得到任何标记或集群?我的 JS 代码如下:

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 12,
      center: { lat: 51.40219, lng: -0.16890 }
    });

    var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    
  }

//Coordinates for the various Memorials and Cemetries listed for the corresponding Hero that will be marked on the map.
// I used https://codepen.io/ahmadawais/pen/NQdWQx?editors=1010 to see how to do the below with the locations as this way it will show with the names of the memorials or cemeteries
var locations = [
  ['Private Richard Spearink - St Souplet British Cemetery', { lat: 50.05484, lng: 3.52440 }, 1],
  ['Private Frederick Spearink - Mitcham War Memorial', { lat: 51.40219, lng: -0.16890 }, 2],
  ['Private Frederick Spearink - Helles Memorial', { lat: 40.04597, lng: 26.17921}, 2]
];

var markers = locations.map(function(location, i) {
  return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
  });
});

var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

谁能告诉我我需要添加或删除什么,因为我不确定为什么这不起作用?

您没有正确传递标记的纬度和经度。

您的 locations 数组是固定长度数组(“元组”)的数组,其中第二个是匹配 [=24] 的 latlng 的对象=],但在您的 locations.map 中,您传递的是 location,这是整个元组。

因为每个条目都不是 location,所以我已将 location 重命名为 locationTuple;名称对代码无关紧要,但它确实使 您需要使用 locationTuple[1](或 location[1])来引用 [=14] 的值变得更清楚=]。那时您还可以将标签用作 locationTuple[0] 而不是选择任意字母。

var locations = [
  ['Private Richard Spearink - St Souplet British Cemetery', { lat: 50.05484, lng: 3.52440 }, 1],
  ['Private Frederick Spearink - Mitcham War Memorial', { lat: 51.40219, lng: -0.16890 }, 2],
  ['Private Frederick Spearink - Helles Memorial', { lat: 40.04597, lng: 26.17921}, 2]
];

var markers = locations.map(function(locationTuple, i) {   // rename
  return new google.maps.Marker({
      position: locationTuple[1],                          // rename + add index 1
      label: locationTuple[0]                              // rename + add index 0
  });
});