javascript - 如何在 Google map 中正确使用复杂的 SVG 图像路径

Question

我创建了一个小谷歌地图页面，它显示(目前)预定义点的方向。

这可以找到here

在此示例中，我使用了 Google Maps API 中的默认箭头图标:

icon: {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 6,
    rotation: heading
}

但是，我有自己的自定义 SVG 图像(从 Illustrator CS6 导出)，我想用它来代替箭头。

起初我以为我可以将 url 放到 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 Path，是这样的:

<?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 路径表示法。但是，箭头不在圆圈的中间。 fiddle 在这里: jsfiddle.net/pwadme2y

Answer 1

符号/图标路径必须是单个 SVG 路径定义。带有填充颜色和描边(线条)颜色。您的符号有多个路径，以及文本和其他内容，如剪辑路径。

幸运的是，AI 添加的剪辑路径通常可以忽略。另外，符号中的文本非常小，以至于它不是真正可见的，可以删除。

其余路径(箭头和两个圆圈)将需要合并为一条路径。您可以在 Illustrator 中执行此操作。完成此操作后，您可以将路径定义从 SVG 文件复制到 map 标记定义中。

但是，如果您将所有路径合并为一个，您将被单一颜色标记卡住。如果您需要使用一种以上的颜色来保持设计，那么您需要制作两个标记(一个用于箭头，一个用于圆圈)，然后将它们叠加在 map 上。

另一种选择是保持 SVG 不变并使用绝对定位将 SVG 定位在 map 上的正确位置。但是，本地图滚动或缩放时，您需要负责移动和旋转它。