使用geoxml3加载谷歌地图KML时如何随缩放调整地标名称字体大小

你修改的placemark.style.scale是geoxml3解析KML文件时使用的原始配置属性，当Marker实例被创建并渲染到地图上后，该属性和已生成的Marker、标签没有绑定关系，修改后不会触发地图元素的重绘，因此不会生效。

Marker实例的标签样式需要直接通过谷歌地图提供的set接口修改，你可以结合当前地图缩放级别动态调整标签字体大小、图标尺寸，缩放级别较低时也可以选择直接隐藏部分标签避免重叠。

具体修改步骤 #

1. 先修改createMarker函数，将初始化的标签从字符串格式改为对象格式，方便后续修改样式：

function createMarker(placemark, doc) {
  var markerOptions = {
    optimized: true,
    position: placemark.latlng,
    map: map,
    // 调整为对象格式的label，预设初始字体大小
    label: {
      text: placemark.name,
      fontSize: "12px"
    },
    icon: {
      path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
      scale: 4,
    },
    visible: true,
  };

  var marker = new google.maps.Marker(markerOptions);
  doc.markers.push(marker);

  return marker;
}

2. 修改display_markers函数，在地图缩放/移动时，根据当前缩放级别动态调整所有可见Marker的标签字体、图标大小：

function display_markers() {
  var mapBounds = map.getBounds();
  var currentZoom = map.getZoom();
  // 可根据实际需求自定义不同缩放级别的样式参数
  let labelFontSize = "12px";
  let iconScale = 4;
  if (currentZoom < 15 && currentZoom >= 12) {
    labelFontSize = "10px";
    iconScale = 3;
  } else if (currentZoom < 12) {
    // 缩放级别低于12时可以调更小，或者直接设置为0隐藏标签
    labelFontSize = "8px";
    iconScale = 2;
  }

  geoXml.docs[0].markers.forEach(function(marker) {
    var in_bounds = mapBounds.contains(marker.getPosition());
    marker.setVisible(in_bounds);
    if (in_bounds) {
      // 更新标签字体大小
      marker.set("label", {
        ...marker.getLabel(),
        fontSize: labelFontSize
      });
      // 同步更新图标尺寸，进一步减少占用空间
      let icon = marker.getIcon();
      icon.scale = iconScale;
      marker.setIcon(icon);
    }
  });
}

如果调整尺寸后仍存在重叠问题，可额外增加碰撞检测逻辑：将Marker的经纬度转换为屏幕像素坐标，判断两个标签的像素距离小于阈值时，隐藏优先级较低的标签即可。

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