如何为React Google Maps API折线添加可自定义文本标识

完全可以实现，核心思路是用SymbolPath.CUSTOM创建嵌入动态文本的自定义SVG图标，再把它加到Polyline的icons数组里——这样文本会和Polyline的箭头同步位置，缩放时也不会偏移，完美解决你之前的问题。

具体实现步骤 #

• 生成带动态距离文本的SVG字符串
  先把distance内容嵌入SVG，调整好文本位置和样式，确保显示在Polyline上方：

  const getDistanceIcon = (distance: string) => {
    return `
      <svg width="60" height="20" viewBox="0 0 60 20" xmlns="http://www.w3.org/2000/svg">
        <text x="30" y="15" font-size="12" fill="#333" text-anchor="middle" font-weight="bold">
          ${distance}
        </text>
      </svg>
    `;
  };
  

• 把SVG转成Data URL格式
  转成Google Maps API能识别的Data URL：

  const svgToDataUrl = (svg: string) => {
    return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`;
  };
  

• 配置Polyline的icons属性
  在icons数组里同时保留箭头图标和自定义文本图标，设置相同的offset（45%）让两者紧邻：

  <Polyline
    path={yourPath}
    icons={[
      // 原有箭头图标
      {
        icon: {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
          scale: 1.5,
          fillColor: '#000',
          fillOpacity: 1
        },
        offset: '45%'
      },
      // 自定义距离文本图标
      {
        icon: {
          url: svgToDataUrl(getDistanceIcon(distance)),
          anchor: new google.maps.Point(30, 20) // 调整锚点让文本刚好在箭头上方
        },
        offset: '45%'
      }
    ]}
    // 其他Polyline属性...
  />
  

关键细节调整 #

• 可以修改SVG的viewBox、文本font-size或者锚点坐标，让文本位置更贴合需求；
• 如果要适配不同缩放级别，能根据地图缩放值动态调整SVG里的文本大小；
• 这种方式不需要额外的OverlayView，文本会和Polyline完全同步，彻底解决缩放偏移问题。

内容的提问来源于stack exchange，提问作者Amir-Mousavi