如何在Google Maps API v3中使用SVG标记

2018-06-05 19:54:37

我可以使用我的转换后的image.svg作为谷歌地图图标吗？我正在将我的png图像转换为svg，并且我想使用这种可以旋转的Google地图符号。我已经尝试使用谷歌地图符号，但我想有一个像汽车，人等图标......这就是为什么我将我的一些png文件转换为svg，就像这个示例站点，他用这些http：/ /什么？ /www.goprotravelling.com/

您可以使用SVG路径表示法呈现您的图标。

有关更多信息，请参阅Google文档。

这是一个基本的例子：

var icon = {

    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon
});

以下是有关如何显示和缩放标记SVG图标的工作示例：

JSFiddle演示

编辑：

这里有一个复杂图标的另一个例子：

JSFiddle演示

编辑2：

下面是如何将SVG文件作为图标：

JSFiddle演示

如果你需要一个完整的svg不仅仅是一个路径，而且你希望它可以在客户端修改（例如改变文本，隐藏详细信息......），你可以使用包含svg的替代数据'URL'：

var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>';
icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg);

JavaScript（Firefox）btoa（）用于从SVG文本中获取base64编码。您也可以使用http://dopiaza.org/tools/datauri/index.php来生成基本数据网址。

这里是一个完整的例子jsfiddle：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    </head>
    <body>
        <div id="map" style="width: 500px; height: 400px;"></div>
        <script type="text/javascript">
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var template = [
                '<?xml version="1.0"?>',
                    '<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
                        '<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
                    '</svg>'
                ].join('n');
            var svg = template.replace('{{ color }}', '#800');

            var docMarker = new google.maps.Marker({
                position: new google.maps.LatLng(-33.92, 151.25),
                map: map,
                title: 'Dynamic SVG Marker',
                icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg), scaledSize: new google.maps.Size(20, 20) },
optimized: false
            });

            var docMarker = new google.maps.Marker({
                position: new google.maps.LatLng(-33.95, 151.25),
                map: map,
                title: 'Dynamic SVG Marker',
                icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg), scaledSize: new google.maps.Size(20, 20) },
optimized: false
            });
        </script>
    </body>
</html>

其他信息可以在这里找到。

避免base64编码：

为了避免base64编码，你可以用'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg)替换'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)

这应该适用于IE9以上的现代浏览器。其优点是encodeURIComponent是一个默认的js函数，并可在所有现代浏览器中使用。你也可以变得更小环节，但你需要测试这一点，并考虑使用' ，而不是"你的SVG。

另请参阅优化数据URI中的SVG以获取更多信息。

IE支持：为了在IE中支持SVG标记，需要两个小的适配，如下所述：IE中的SVG标记。我更新了示例代码以支持IE。

我知道这篇文章有点旧了，但是我在SO上看到过很多这方面的糟糕信息，所以我可以尖叫。所以我只需要用我完全不同的方法来投入我的两分钱，因为我在许多地图上都可靠地使用它。除此之外，我相信OP希望能够在地图点周围旋转箭头标记，这不同于围绕它自己的x，y轴旋转图标，这将改变地图上箭头标记指向的位置。

首先，请记住我们使用的是Google地图和SVG，因此我们必须满足Google部署SVG实现标记（或实际符号）的方式。 Google将其SVG标记图像的锚点设置为0,0，这不是SVG viewBox的左上角。为了解决这个问题，你必须绘制你的SVG图像有点不同，以便让Google知道它想要的是什么......是的，答案就是你在SVG编辑器（Illustrator，Inkscape等）中实际创建SVG路径的方式。）。

第一步，是摆脱viewBox。这可以通过将XML中的viewBox设置为0来完成......这是正确的，只是一个零而不是viewBox的四个参数。这将关闭视图框（并且是的，这在语义上是正确的）。当你这样做时，你可能会注意到图像的大小会立即跳跃，这是因为svg不再具有基础（viewBox）来缩放图像。因此，我们直接创建该参考，将宽度和高度设置为希望图像在SVG编辑器的XML编辑器中的实际像素数。

通过在XML编辑器中设置svg图像的宽度和高度，您可以为图像缩放创建一个基准，并且默认情况下，此大小对于标记缩放属性的值为1。您可以看到这对标记的动态缩放具有的优势。

现在您已经调整好图像大小了，移动图像直到图像中希望作为锚点的部分位于svg编辑器的0,0坐标上。完成后，复制svg路径的d属性的值。你会注意到大约一半的数字是负数，这是对齐图像的0,0而不是viewBox的锚点的结果。

然后使用这种技术，您可以在地图上的lat和lng点周围正确旋转标记。这是将想要的svg标记上的点与标记位置的纬度和长度绑定的唯一可靠方法。

我试图为此制作一个JSFiddle ，但是在那里实现了一些错误，我不喜欢重新解释代码的原因之一。相反，我在下面包含了一个完全独立的示例，您可以尝试，适应并将其用作参考。这是我在JSFiddle上尝试过的相同的代码失败了，但它没有呜咽就通过Firebug运行。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport"  content="width=device-width, initial-scale=1" />
    <meta name="author"    content="Drew G. Stimson, Sr. ( Epiphany )" />
    <title>Create Draggable and Rotatable SVG Marker</title>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
    <style type="text/css">
      #document_body {
        margin:0;
        border: 0;
        padding: 10px;
        font-family: Arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #f0f9f9;
        text-align: center;
        text-shadow: 1px 1px 1px #000;
        background:#1f1f1f;
      }
      #map_canvas, #rotation_control {
        margin: 1px;
        border:1px solid #000;
        background:#444;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
      }
      #map_canvas { 
        width: 100%;
        height: 360px;
      }
      #rotation_control { 
        width: auto;
        padding:5px;
      }
      #rotation_value { 
        margin: 1px;
        border:1px solid #999;
        width: 60px;
        padding:2px;
        font-weight: bold;
        color: #00cc00;
        text-align: center;
        background:#111;
        border-radius: 4px;
      }
</style>

<script type="text/javascript">
  var map, arrow_marker, arrow_options;
  var map_center = {lat:41.0, lng:-103.0};
  var arrow_icon = {
    path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
    strokeColor: 'black',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#fefe99',
    fillOpacity: 1,
    rotation: 0,
    scale: 1.0
  };

function init(){
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: map_center,
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  arrow_options = {
    position: map_center,
    icon: arrow_icon,
    clickable: false,
    draggable: true,
    crossOnDrag: true,
    visible: true,
    animation: 0,
    title: 'I am a Draggable-Rotatable Marker!' 
  };
  arrow_marker = new google.maps.Marker(arrow_options);
  arrow_marker.setMap(map);
}
function setRotation(){
  var heading = parseInt(document.getElementById('rotation_value').value);
  if (isNaN(heading)) heading = 0;
  if (heading < 0) heading = 359;
  if (heading > 359) heading = 0;
  arrow_icon.rotation = heading;
  arrow_marker.setOptions({icon:arrow_icon});
  document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
  <div id="rotation_control">
    <small>Enter heading to rotate marker&nbsp;&nbsp;&nbsp;&nbsp;</small>
    Heading&deg;<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
    <small>&nbsp;&nbsp;&nbsp;&nbsp;Drag marker to place marker</small>
    </div>
    <div id="map_canvas"></div>
</body>
</html>

这正是Google为它在Maps API的SYMBOL类中提供的几个符号所做的，所以如果这样做不能说服你......无论如何，我希望这可以帮助您正确制作和设置SVG标记你的谷歌地图的努力。

链接地址: http://www.djcxy.com/p/18323.html

上一篇: How to use SVG markers in Google Maps API v3

下一篇: SVG Rendering Error