如何将指定SVG图片渲染为Google Map标记

嘿，我来帮你搞定把这个SVG转换成Google Maps标记的事儿！这里有两种实用方法，一步步来操作：

这种方法不用额外存文件，直接把SVG代码嵌入到你的JS里就行：

• 先把你的SVG代码压缩一下：去掉多余的换行、空格（别破坏标签和属性结构就行），还要补全被截断的path的d属性——你给的代码里路径没写完，这会导致SVG渲染失败哦。
• 把压缩后的SVG转成Data URI格式，用encodeURIComponent处理字符串避免编码问题。
• 在创建Google Maps Marker的时候，把icon属性配置成这个Data URI，同时设置好尺寸和锚点（让标记的底部对准地图坐标点）。

示例代码：

// 补全并压缩后的SVG字符串
const busSvg = `<svg version="1.1" id="svgBusMarker" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><g><path id="SVG_Timing" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#92E0A4" stroke-width="4.2823" stroke-miterlimit="22.9256" d="M13.896,36.696c0-6.115,4.988-11.104,11.104-11.104s11.104,4.988,11.104,11.104"/></g></svg>`;

// 转换为Data URI
const busMarkerIcon = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(busSvg)}`;

// 创建地图标记
const marker = new google.maps.Marker({
  position: { lat: 37.7749, lng: -122.4194 }, // 替换成你的坐标
  map: yourMapInstance, // 替换成你的地图实例
  icon: {
    url: busMarkerIcon,
    size: new google.maps.Size(50, 50), // 和SVG尺寸一致
    anchor: new google.maps.Point(25, 50) // 锚点设为底部中心，对准坐标
  },
  title: 'Bus Stop'
});

如果你的SVG比较复杂，或者需要复用，这种方法更清晰：

• 把完整的SVG代码保存成一个.svg文件（比如bus-marker.svg），放到你的网站静态资源目录里。
• 在Marker的icon属性里直接引用这个文件的路径，同样设置尺寸和锚点。

示例代码：

const marker = new google.maps.Marker({
  position: { lat: 37.7749, lng: -122.4194 }, // 替换成你的坐标
  map: yourMapInstance, // 替换成你的地图实例
  icon: {
    url: '/assets/bus-marker.svg', // 替换成你的SVG文件路径
    size: new google.maps.Size(50, 50),
    anchor: new google.maps.Point(25, 50)
  },
  title: 'Bus Stop'
});

• 补全SVG路径：你提供的SVG里path的d属性被截断了，一定要把完整的路径数据补上，否则SVG无法正常渲染。
• 锚点调整：如果你的标记形状不是对称的，可能需要微调anchor的坐标，确保标记的正确位置对准地图上的坐标点。
• 编码问题：用encodeURIComponent处理SVG字符串可以避免特殊字符导致的Data URI失效问题。

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