Google maps 如何在googlemap中绘制复杂的svg

我试图在Google地图上添加一个复杂的SVG作为标记。现在，如果我使用此代码：

var icon = { 
    path:"calc.svg",
  }

 var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: icon
  });

my calc.svg未添加为地图上的标记。若我在var图标选项中将路径更改为url，我会在地图上添加标记，但我无法获得旋转和调整大小的功能。以下是我的选择及其问题：

添加自定义SVG以获取旋转和调整大小选项。问题是我不能使用自定义SVG的路径，因为它们太复杂了。请参阅随附的一个SVG示例代码。 使用url将自定义SVG添加为图像。问题是我没有调整大小和旋转选项。 我希望我解决了我的问题。不过，如果对我的问题有任何不明确的理解，请告诉我

自定义SVG的代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="177.855px" height="199.746px" viewBox="0 0 177.855 199.746" enable-background="new 0 0 177.855 199.746"
     xml:space="preserve">
<g>
    <path fill="#A6A8AB" d="M39.425,110.927"/>
    <path fill="#A6A8AB" d="M61.889,139.35l-1.407,4.487l-1.433-0.448l-4.891,2.459L57.066,151l1.464,0.459l-1.479,4.721l-7.808-2.448
        l1.479-4.719l1.739,0.546l-1.912-3.199l-3.519,1.497l1.83,0.573l-1.478,4.719l-6.863-2.152l1.479-4.715l1.435,0.448l5.206-2.612
        l-2.856-4.886l-1.436-0.448l1.406-4.49l7.809,2.449l-1.407,4.487l-1.83-0.573l2.05,3.079l2.921-1.521l-1.677-0.525l1.405-4.488
        L61.889,139.35z"/>
</g>
<g>
    <path fill="#54B5C5" d="M59.316,154.072c-1.044,3.329-4.905,5.082-8.626,3.916l-27.922-8.751c-3.72-1.166-5.891-4.812-4.848-8.139
        l6.491-20.712c1.043-3.327,4.904-5.08,8.625-3.914l27.924,8.752c3.719,1.165,5.891,4.811,4.847,8.139L59.316,154.072z"/>
    <path fill="#FFFFFF" d="M52.35,131.345l-1.407,4.488l-1.433-0.449l-4.891,2.459l2.906,5.152l1.465,0.459l-1.479,4.719l-7.808-2.447
        l1.479-4.719l1.739,0.545l-1.912-3.198l-3.518,1.497l1.829,0.572l-1.478,4.72l-6.863-2.151l1.479-4.717l1.435,0.449l5.206-2.612
        l-2.856-4.886l-1.436-0.449l1.406-4.488l7.809,2.447l-1.406,4.488l-1.831-0.574l2.05,3.08l2.921-1.521l-1.677-0.524l1.405-4.488
        L52.35,131.345z"/>
    <path fill="#FFFFFF" d="M88.358,145.612l16.104,5.048l-1.18,3.771l-16.106-5.049L88.358,145.612z M86.007,153.115l16.104,5.049
        l-1.183,3.77l-16.104-5.046L86.007,153.115z"/>
</g>
</svg>

---

你可以试试这个。路径有点复杂，但它似乎是旋转和调整大小的最佳选择。我目前正在处理同一问题。这个@Aleem有什么进展吗？这可能吗？我希望我不必使用png@E.E.33我必须使用XML解析器从定制SVG中提取单个字符串中的所有标记，并将该字符串用于path属性。它帮助我获得了SVG的完整布局，但我丢失了所有颜色。所以我不得不使用fill属性在整个SVG中填充一种颜色。。谢谢，我正在研究一个解决方案，将SVG中的每个路径作为单独的符号分层到地图上，使其看起来像一个图标。重要的是，我们将颜色变化作为品牌要求。如果我成功了，我会发布我的解决方案。