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

2019年8月4日 224次阅读

我创建了一个小的谷歌地图页面,显示(现在)预定义点的方向.

这可以找到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路径,如下所示：

<?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

最佳答案 符号/图标路径必须是单个SVG路径定义.填充颜​​色和笔触(线)颜色.您的符号具有多个路径,以及文本和剪辑路径等其他内容.

幸运的是,AI添加的剪辑路径通常可以忽略.此外,您的符号中的文字非常小,以至于它不是真的可见并且可以删除.

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

但是,如果将所有路径合并为一个路径,则会遇到单个颜色标记.如果您需要使用多种颜色保持设计,则需要制作两个标记(一个用于箭头,一个用于圆圈),然后将它们叠加在地图上.

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

点赞