如何在Google Maps 3.58版本中自定义标记文本字体大小？

在3.58版本中，Google Maps调整了PinElement的DOM结构，直接修改pinGlyph.element的fontSize不会生效，因为标记内的文本被封装在子元素中。你需要定位到承载文本的具体子元素来修改字体大小。

修改后的关键代码部分 #

将你代码中设置字体大小的这段：

// Apply custom font size directly to the pin glyph's element
const markerElement = pinGlyph.element;
markerElement.style.fontSize = fontSize; // Change the font size dynamically

替换为：

// 定位到标记内的文本子元素并设置字体大小
const textElement = pinGlyph.element.querySelector('.gm-marker-pin-glyph');
if (textElement) {
  textElement.style.fontSize = fontSize;
}

完整修改后的代码示例 #

<!doctype html>
<html>
  <head>
    <title>Simple Map</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      let map;

      async function initMap() {
        const { Map, InfoWindow } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

        // Initialize the map
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: { lat: 1.366546901577395, lng: 103.8065581439425 },
          mapId: "DEMO_MAP_ID",
        });

        const infoWindow = new google.maps.InfoWindow({
          content: "",
          disableAutoPan: true,
        });

        // Add markers to the map
        const markers = locations.map((position) => {
          const label = position.label;
          const background = position.backgroundColor || "#FF0000"; // Default background if not provided
          const glyphColor = position.glyphColor || "#FFFFFF"; // Default glyph color if not provided
          const fontSize = position.fontSize || "16px"; // Custom font size for the marker text

          // Create a pin with custom styles
          const pinGlyph = new google.maps.marker.PinElement({
            glyph: label,
            glyphColor: glyphColor, // Text color
            scale: 1.5,
            background: background, // Background color
          });

          // Create an AdvancedMarkerElement for the pin
          const marker = new google.maps.marker.AdvancedMarkerElement({
            position,
            content: pinGlyph.element,
          });

          // 修改：定位到文本子元素设置字体大小
          const textElement = pinGlyph.element.querySelector('.gm-marker-pin-glyph');
          if (textElement) {
            textElement.style.fontSize = fontSize;
          }

          // Add event listener for info window on marker click
          marker.addListener("click", () => {
            infoWindow.setContent(
              position.code +
                " - " +
                position.road +
                " " +
                position.stop +
                "<br>" +
                position.lat +
                ", " +
                position.lng
            );
            infoWindow.open(map, marker);
          });

          return marker;
        });

        // Add a marker clusterer to manage the markers
        new markerClusterer.MarkerClusterer({ markers, map });
      }

      // Location data with an optional `fontSize` field for custom font sizes
      const locations = [
        {
          lat: 1.39465386086721,
          lng: 103.900462389006,
          code: "67259",
          road: "Compassvale St",
          stop: "B02",
          label: "Day A.100",
          backgroundColor: "#32a852",
          fontSize: "12px",
        },
        {
          lat: 1.38949805550873,
          lng: 103.905189999894,
          code: "67121",
          road: "Sengkang East Way",
          stop: "B03",
          label: " DayA. -2000 ",
          backgroundColor: "#000000",
          fontSize: "18px",
        },
        {
          lat: 1.39101786005668,
          lng: 103.897780179965,
          code: "67181",
          road: "Compassvale Rd",
          stop: "B06",
          label: "A.3",
          fontSize: "14px",
        },
        {
          lat: 1.38151407829697,
          lng: 103.897492379194,
          code: "65019",
          road: "Punggol Rd",
          stop: "B02",
          label: "A.4",
          fontSize: "10px",
        },
        {
          lat: 1.38533638989648,
          lng: 103.890742156576,
          code: "67469",
          road: "Sengkang East Rd",
          stop: "B01A",
          label: "A.5",
          fontSize: "14px",
        }
        // Add other markers here...
      ];

      // Initialize the map
      initMap();
    </script>

    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

    <script async
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
    </script>
  </body>
</html>

补充说明 #

如果需要全局统一设置所有标记的文本大小，也可以通过CSS样式覆盖：

.gm-marker-pin-glyph {
  font-size: 14px !important;
}

但如果要给不同标记设置不同大小，还是通过JS动态定位子元素修改的方式更灵活。

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