我正在尝试在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上添加我的标记但我无法获得旋转和调整大小的功能。所以这是我的选择和他们的问题:
path
自定义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>