在 Google 地图中使用 SVG 作为标记？答案

【问题标题】：Use an SVG for a marker in Google Maps?在 Google 地图中使用 SVG 作为标记？
【发布时间】：2011-04-25 22:45:30
【问题描述】：

我知道可以将 svg 叠加层添加到谷歌地图。我想知道你是否可以使用 svg 文件作为标记。我尝试像设置 png 或 jpg 文件一样设置它，但没有任何显示。让我知道我是否应该发布我的代码，但我认为我可能以错误的方式接近它。

谢谢。

【问题讨论】：

【解决方案1】：

在 Google Maps API v3 上，使用此代码（它还处理大小调整）对我来说工作得很好：

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  icon: new google.maps.MarkerImage('/path/to/icon.svg',
    null, null, null, new google.maps.Size(64,64)),
  draggable: false,
  map: map
});

【讨论】：

这样，gmaps 无论如何都会创建一个标签。您应该改用符号（developers.google.com/maps/documentation/javascript/symbols）！
如果您在 IE11 上实现它时遇到问题，请查看此解决方案以帮助解决任何问题：stackoverflow.com/questions/27261346/…
请注意：如果您的svg文件中有动画，则需要添加优化选项，设置为false

【解决方案2】：

我遇到了这个问题，但我在代码编辑器中查看了 svg，它缺少定义的宽度和高度。

没用

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3"
    xml:space="preserve">

工作过

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" 
    width="33px" height="50px" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3" 
    xml:space="preserve">

【讨论】：

这与 Yuval Adam 的响应一起效果最好...尺寸需要在 SVG 文件中明确指定，google.maps.Size() 实际上定义了地图上的实际显示尺寸。

【解决方案3】：

引用外部 SVG 时，您需要使用 scaledSize 而不是 size 作为图标。见下面的代码 sn-p...

function initMap() {
  var springfield = {
    lat: 39.9354165,
    lng: -83.8215624
  };

  var homer = {
    url: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg',
    scaledSize: new google.maps.Size(64, 64),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  }

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: springfield
  });

  var marker = new google.maps.Marker({
    position: springfield,
    map: map,
    icon: homer,
    draggable: true
  });
}

#map {
  height: 400px;
  width: 100%;
}

<script async defer src="//maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>

【讨论】：

谢谢，即使 SVG 文件中没有宽度和高度属性，scaledSize 也能正常工作。

【解决方案4】：

var marker = new google.maps.Marker({
        icon: {
            size: new google.maps.Size(21, 45),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(21, 45),
            url: `data:image/svg+xml;utf-8,
                        <svg width="21" height="45" viewBox="0 0 21 45" xmlns="http://www.w3.org/2000/svg"><title>POINT</title><desc>Created with Sketch.</desc><g transform="translate(-651 -1250) translate(651 1250)" fill="#F76A4C"><circle cx="10.5" cy="10.5" r="10.5"/><path d="M9 19h3v26h-3z"/></g></svg>`
        }
    });

codepen 上的实时示例。

【讨论】：

【解决方案5】：

如上所述，scaledSize 是使魔法发生的属性：

  window.userimage = {
    url: '/img/user.svg',
    scaledSize: new google.maps.Size(64, 64),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 0)
  };


  window.usermarker = new google.maps.Marker({
    map: minimap,
    animation: google.maps.Animation.DROP,
    anchorPoint: new google.maps.Point(0, -29),
    icon: userimage,
  });

结果：

【讨论】：