Google Maps API：KML与JSON图层切换及加载异常问题求助

这个场景我太熟悉了——大体积KML和大量标记同时加载很容易因为资源竞争或者渲染压力出问题，把两者的加载逻辑拆分开，通过按钮触发切换就搞定了。核心思路是默认只加载轻量的JSON标记，点击按钮再清理标记、加载KML，具体实现如下：

1. HTML结构 #

先准备地图容器和切换按钮：

<div id="map" style="width: 100%; height: 600px;"></div>
<button id="loadBikeRoutes">加载多伦多自行车路线</button>

2. JavaScript核心代码 #

用jQuery配合Google Maps API，重点是保存标记和KML图层的引用，方便后续清理：

// 全局变量保存地图实例、标记数组和KML图层
let map;
let bikeStationMarkers = [];
let bikeRouteKml = null;

// 初始化地图+默认加载共享单车站点
function initMap() {
  // 初始化多伦多地图
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 43.6532, lng: -79.3832},
    zoom: 12
  });

  // 默认加载JSON标记
  loadBikeStations();
}

// 加载共享单车站点JSON
function loadBikeStations() {
  $.getJSON('你的共享单车站点JSON地址', function(stationData) {
    stationData.forEach(station => {
      const marker = new google.maps.Marker({
        position: {lat: station.latitude, lng: station.longitude},
        map: map,
        title: station.name
      });
      // 把标记存入数组，方便后续批量清除
      bikeStationMarkers.push(marker);
    });
  }).fail(function() {
    alert('共享单车站点加载失败，请稍后重试');
  });
}

// 切换到自行车路线KML的逻辑
function loadBikeRouteLayer() {
  // 第一步：清除所有已加载的共享单车站点标记
  bikeStationMarkers.forEach(marker => marker.setMap(null));
  bikeStationMarkers = []; // 清空数组释放内存

  // 第二步：如果之前加载过KML，先移除旧图层避免叠加
  if (bikeRouteKml) {
    bikeRouteKml.setMap(null);
  }

  // 第三步：加载KML图层
  bikeRouteKml = new google.maps.KmlLayer({
    url: '你的多伦多自行车路线KML地址',
    map: map,
    // 可选：如果KML太大，关闭自动调整视野，提升加载速度
    preserveViewport: false
  });

  // 监听KML加载完成，自动适配地图视野
  bikeRouteKml.addListener('defaultviewport_changed', function() {
    map.fitBounds(bikeRouteKml.getDefaultViewport());
  });

  // KML加载错误处理
  bikeRouteKml.addListener('error', function(err) {
    alert('自行车路线加载失败：' + err.errorMessage);
  });

  // 按钮状态更新，避免重复点击
  $('#loadBikeRoutes').text('已加载路线').prop('disabled', true);
}

// 绑定按钮点击事件
$(document).ready(function() {
  $('#loadBikeRoutes').click(loadBikeRouteLayer);
});

3. 关键注意事项 #

• 引用管理是核心：必须把所有标记存入数组，不然没法批量清除；KML图层也要保存实例，重复加载会导致图层叠加
• 内存清理：标记调用setMap(null)后，记得清空数组，避免内存泄漏
• 性能优化：如果KML体积超大，可以关闭preserveViewport，或者在加载时添加加载动画提示用户
• 错误处理：给JSON和KML的加载过程添加失败监听，提升用户体验

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