我创建了一个小小的Google地图页面,显示(现在)预定义点的方向。
可以找到here
在此示例中,我使用的是Google Maps API中的默认箭头图标:
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 6,
rotation: heading
}
但是,我有自己的自定义SVG图像(从Illustrator CS6导出),我想用而不是箭头。
起初我以为我可以将网址放到svg图片中,其中包含一些像这样的大小属性:
icon: {
url: 'img/test_dev.svg',
size: new google.maps.Size(128, 128),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 32),
rotation: direction
}
显示SVG图像,但不应用旋转。
我已经读过,无法将旋转应用于自定义标记/图像,我必须使用SVG路径表示法。所以我查看了图像的SVG路径,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="128px" height="128px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<g id="Laag_1">
<g>
<defs>
<rect id="SVGID_1_" x="-0.001" y="0" transform="matrix(0.7009 0.7133 -0.7133 0.7009 389.2615 -86.391)" width="595.282" height="841.888"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M227.617,349.919c39.082-38.405,101.896-37.858,140.301,1.223
c38.406,39.081,37.857,101.897-1.224,140.303c-39.081,38.404-101.896,37.855-140.302-1.227
C187.987,451.139,188.536,388.325,227.617,349.919"/>
<circle clip-path="url(#SVGID_2_)" fill="none" stroke="#1C1C1B" stroke-width="4" cx="297.156" cy="420.682" r="100.212"/>
<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M237.552,359.871c33.5-32.92,87.343-32.451,120.261,1.047
c32.918,33.498,32.449,87.342-1.051,120.26c-33.497,32.92-87.341,32.449-120.259-1.049
C203.583,446.631,204.054,392.788,237.552,359.871"/>
<circle clip-path="url(#SVGID_2_)" fill="none" stroke="#1C1C1B" cx="297.157" cy="420.524" r="85.039"/>
</g>
<text transform="matrix(-0.7032 -0.7156 0.7133 -0.7009 236.9141 485.209)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">O</text>
<text transform="matrix(-0.9668 -0.2681 0.2672 -0.9636 276.4443 506.4121)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">P</text>
<text transform="matrix(-0.9714 0.2512 -0.2504 -0.9682 322.5098 505.2148)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">A</text>
<text transform="matrix(-0.7156 0.7032 -0.7009 -0.7133 360.9883 481.7617)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">L</text>
<text transform="matrix(-0.2681 0.9668 -0.9636 -0.2672 383.0596 441.335)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">B</text>
<text transform="matrix(0.2512 0.9714 -0.9682 0.2504 382.3613 397.3232)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">I</text>
<text transform="matrix(0.7989 0.8129 -0.7133 0.7009 357.1797 355.6123)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">Q</text>
<text transform="matrix(0.7156 -0.7032 0.7009 0.7133 233.3838 359.5435)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">T</text>
<text transform="matrix(0.2681 -0.9668 0.9636 0.2672 211.2422 400.4873)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">N</text>
<text transform="matrix(-0.2512 -0.9714 0.9682 -0.2504 212.1113 443.8857)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">I</text>
<g>
<defs>
<rect id="SVGID_3_" x="-0.001" y="0" transform="matrix(0.7009 0.7133 -0.7133 0.7009 389.2615 -86.391)" width="595.282" height="841.888"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#BB1321" d="M266.426,392.657c-2.859,10.679-1.167,21.098,0.142,30.658l4.325,4.848
c0.036-0.186,0.07-0.373,0.1-0.564c-2.489-9.499,0.299-20.021,8.127-27.008c5.231-4.667,11.773-6.929,18.271-6.856
c6.498,0.042,13,2.415,18.149,7.175c7.704,7.123,10.31,17.694,7.653,27.145c0.028,0.191,0.059,0.379,0.091,0.564l4.408-4.77
c1.47-9.491,3.36-19.828,0.714-30.503c-5.564-22.452-20.931-46.321-30.431-66.398l-0.001-0.001
C288.145,346.81,272.397,370.346,266.426,392.657"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#000000" stroke-width="0.25" d="M266.426,392.657
c-2.859,10.679-1.167,21.098,0.142,30.658l4.325,4.848c0.036-0.186,0.07-0.373,0.1-0.564c-2.489-9.499,0.299-20.021,8.127-27.008
c5.231-4.667,11.773-6.929,18.271-6.856c6.498,0.042,13,2.415,18.149,7.175c7.704,7.123,10.31,17.694,7.653,27.145
c0.028,0.191,0.059,0.379,0.091,0.564l4.408-4.77c1.47-9.491,3.36-19.828,0.714-30.503c-5.564-22.452-20.931-46.321-30.431-66.398
l-0.001-0.001C288.145,346.81,272.397,370.346,266.426,392.657z"/>
</g>
</g>
<g id="Layer_2">
</g>
</svg>
与Google Maps API文档网站上的路径示例相比,这看起来非常复杂。
在应用计算轮换时显示自定义svg图像需要做什么?
编辑:
我创建了2个SVG。圆圈现在是一个SVG文件,对于箭头我使用SVG路径表示法具有适当的属性(颜色,笔划等)。但是,箭头不在圆圈的中间。小提琴在这里:jsfiddle.net/pwadme2y
答案 0 :(得分:2)
符号/图标路径必须是单个SVG路径定义。填充颜色和笔触(线)颜色。您的符号具有多个路径,以及文本和剪辑路径等其他内容。
幸运的是,AI添加的剪辑路径通常可以忽略。此外,您的符号中的文字非常小,以至于它不是真的可见,可以删除。
其余路径(箭头和两个圆圈)需要合并为一条路径。您可以在Illustrator中执行此操作。完成后,您可以将SVG文件中的路径定义复制到地图标记定义中。
但是,如果将所有路径合并为一个路径,则会遇到单个颜色标记。如果你需要使用多种颜色来保持设计,那么你需要制作两个标记(一个用于箭头,一个用于圆圈),然后将它们叠加在地图上。
另一种选择是保持SVG不变,并使用绝对定位将SVG定位在地图上的正确位置。但是,当地图滚动或缩放时,您需要负责移动和旋转它。