如何在Google地图中正确使用复杂的SVG图片路径 [英] How to properly use complex SVG image paths in Google Maps

查看：492
本文介绍了如何在Google地图中正确使用复杂的SVG图片路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个小Google Maps页面，显示（现在）预定义点的方向。

I've created a little Google Maps page which displays the direction of a (for now) pre-defined point.

可以找到这里

在这个例子中，我使用了默认的箭头图标Google Maps API：

In this example I'm using a default arrow icon from the Google Maps API:

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

然而，我有我的自己的自定义SVG图像（从Illustrator CS6导出），我想用它来代替箭头。

However, I have my own custom SVG image (exported from Illustrator CS6) which I want to use in stead of the arrow.

起初我以为我可以将url链接到svg图像，有一些像这样的大小属性：

At first I thought I could just put the url to the svg image, with some size attributes like this:

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图像，但没有 应用旋转。

This shows the SVG image, but does not apply the rotation.

我已经读过，不可能应用旋转自定义标记/图像，我必须使用SVG路径符号。所以我查了一下图像的SVG Path，就像这样：

I have read that it is not possible to apply a rotation to a custom marker/image and I have to make use of the SVG Path notation. So I looked up the SVG Path of the image, which is like this:

<?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文档网站上的路径示例相比，这看起来非常复杂。

This seems very complex, comparing to the path examples that are present on the Google Maps API documentation site.

我需要做什么来显示自定义的svg图片，并应用计算旋转？

What do I need to do to display my custom svg image with the calculation rotation applied?

编辑：

我创建了2个SVG。圆形现在是一个SVG文件，对于箭头，我使用SVG路径符号以及适当的属性（颜色，笔画等）。但是，箭头不在圆圈中间。小提琴在这里： jsfiddle.net/pwadme2y

I created 2 SVG's. The circle is now a SVG file, for the arrow I use the SVG Path notation with the appropriate attributes (color, stroke etc.). However, the arrow is not in the middle of the circle. The fiddle is here: jsfiddle.net/pwadme2y

推荐答案

符号/图标路径必须是单个SVG路径定义。具有填充颜色和笔画（线）颜色。你的符号有多条路径，加上文本和其他东西，如剪辑路径。

Symbol/icon paths have to be a single SVG path definition. with a fill colour and a stroke (line) colour. Your symbol has multiple paths, plus text and other things like clip paths.

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

Luckily the clip paths that AI adds, can generally be ignored. Plus the text in your symbol is so tiny that it is not really visible and could be removed.

其余路径（箭头和两个圆圈）将需要合并成一条路径。你可以在Illustrator中做到这一点。完成之后，您可以将SVG文件中的路径定义复制到您的地图标记定义中。

The remaining paths (the arrow and the two circles) will need to be merged into a single path. You can do this in Illustrator. Once you have done that, you can copy the path definition from your SVG file into your maps marker definition.

但是，如果将所有路径合并为一个，被卡住一个单一的颜色标记。如果您需要使用多种颜色保留设计，那么您需要制作两个标记（一个用于箭头，一个用于圆圈），然后将它们叠加到地图上。

However, if you merge all the paths into one, you will be stuck with a single colour marker. If you need to keep the design with more than one colour, then you will need to make two markers (one for the arrow, and one for the circles), then superimpose them on the map.

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

Another option is to just keep the SVG as it is and use absolute positioning to position the SVG at the right place on the map. However you will need to be responsible for moving and rotating it when the map scrolls or zooms.

这篇关于如何在Google地图中正确使用复杂的SVG图片路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆