Google Maps Markers与MarkerClusterer无法显示问题咨询

以下是你代码中存在的核心问题，对应修改即可正常显示标记和聚合簇：

• 作用域错误：map、labels变量是initMap函数的局部变量，函数外的代码无法访问，会直接抛出变量未定义的运行时错误
• 参数取值错误：创建Marker时position参数传入了完整的location数组，实际应该取数组下标为1的经纬度对象
• 执行时序错误：生成标记、初始化聚合簇的代码在initMap函数外执行，此时地图实例还未创建，逻辑执行顺序完全错误
• 依赖检查：确保页面已单独引入MarkerClusterer组件库，谷歌地图原生JS SDK不自带该组件

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

  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  // 纪念地坐标配置
  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[1],
      label: labels[i % labels.length]
    });
  });

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

内容的提问来源于stack exchange，提问作者Andrew