如何在Google MAP中绘制复杂SVG

时间:2015-01-03 11:00:22

标签: google-maps google-maps-api-3

我正在尝试在Google MAP上添加复杂的SVG作为标记。现在,如果我使用此代码:

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

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

我的calc.svg没有在MAP上添加标记。如果我在path选项中将url更改为var icon,我会在MAP上添加我的标记但我无法获得旋转和调整大小的功能。所以这是我的选择和他们的问题:

  1. 添加自定义SVG以获取旋转和调整大小选项。问题是我不能使用path自定义SVG,因为它们太复杂了。请参阅附带的一个SVG的示例代码。
  2. 使用url将自定义SVG添加为图像。问题是我没有调整大小和旋转选项。
  3. 我希望我能解决问题。如果有任何含糊不清的解释我的问题,请告诉我。

    自定义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>
    

0 个答案:

没有答案