调用Google Maps标记聚类报InvalidValueError错误该如何解决

你的代码存在4个核心错误，对应修改即可解决报错：

• 变量作用域错误：markers是createMarker函数内部的局部变量，函数外部无法访问，传给MarkerClusterer的markers实际为无效值
• 聚类初始化逻辑错误：MarkerClusterer需要接收所有标记组成的数组，仅需初始化1次，你放在循环内会每生成一个标记就新建一个聚类实例，完全不符合使用规范
• 缺少标记存储数组：没有统一存储所有标记的上层数组，无法把全部标记传给聚类组件
• 函数重复定义：createMarker定义在循环内部，每次循环都会重复声明，存在冗余

另外请确保页面上存在id为map的DOM元素，且已经设置了明确的宽高属性，否则map实例也会生成失败触发该报错。

修正后可运行代码 #

var map;
// 新增存储所有标记的数组
var allMarkers = [];

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(38, -78),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'), mapProp);
};

// 把createMarker移到循环外部，避免重复定义
function createMarker(i, field, data, labels) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
    map: map,
    label: labels[i % labels.length],
    title: field.crossroad
  });
  // 生成后存入全局标记数组
  allMarkers.push(marker);
};

jQuery(document).ready(function() {
  var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
  initialize();
  const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  jQuery.getJSON(url, function(data) {
    jQuery.each(data, function(i, field) {
      createMarker(i, field, data, labels);
    });
    // 所有标记生成完成后，统一初始化一次聚类组件
    new MarkerClusterer({ markers: allMarkers, map: map });
  });
});

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