内联 SVG 未在谷歌地图中显示为标记答案

【问题标题】：Inline SVG not showing as marker in google maps内联 SVG 未在谷歌地图中显示为标记
【发布时间】：2026-02-12 02:35:01
【问题描述】：

我在 Illustrator CC 中创建了一个 SVG，它在内联 JS 中声明为变量，尝试了 Illustrator 提供的所有选项，但没有 SVG 的工作。我正在尝试将此 var 用作谷歌地图中的标记。我发现这篇文章：https://robert.katzki.de/posts/inline-svg-as-google-maps-marker 并使用其中的内联 SVG 可以工作，但我的 SVG 不能。有谁知道我应该如何在 Illustrator 中保存 SVG 以使其在 Google 地图中用作标记？这是我正在使用的代码（在本示例中，我使用的是文章中的内联 SVG）：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&v=3.21.5a&libraries=drawing&signed_in=true&libraries=places,drawing"></script>
    <style type="text/css">
      #map, html, body {
        padding: 0;
        margin: 0;
        height: 90%;
      }
    </style>
    <script type="text/javascript">

function initialize() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: new google.maps.LatLng(41.0257978,21.293566),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: true,
    zoomControl: false
  });

  var myIcon = new google.maps.MarkerImage('data:image/svg+xml;utf-8, \
  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> \
  <path fill="red" stroke="white" stroke-width="1.5" d="M3.5 3.5h25v25h-25z" ></path> \
  </svg>', null, null, null, new google.maps.Size(21,30));

  google.maps.event.addListener(map, 'click', function(e) {
    var myLatLng = {lat: e.latLng.lat(), lng: e.latLng.lng()};
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon:myIcon
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
     <div id="map">A</div>
  </body>
</html>

这是我尝试使用的 SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2DB450;}
    .st1{fill:#FFFFFF;}
</style>
<g transform="translate(40 -93)">
    <circle class="st0" cx="-255" cy="490" r="45"/>
    <path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490
        l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/>
</g>
</svg>

编辑： 我发现如果我保存 SVG 文件并在 url 参数中使用文件名而不是在其中嵌入 SVG 代码，则它适用于所有浏览器。但遗憾的是我必须嵌入代码。有人解决这个问题吗？

【问题讨论】：

标签： javascript google-maps svg

【解决方案1】：

用您还发布的 SVG 替换您发布的代码中的“带白色边框的红色框”SVG（正如在 cmets 中观察到的 Robert Longson，要在 Chrome 以外的浏览器中工作，# 必须是 URL 编码的):

var myIcon = {
  url: 'data:image/svg+xml;utf-8, <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="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
  size: new google.maps.Size(32, 32),
  scaledSize: new google.maps.Size(20, 20)
};

（注意： MarkerImage 类很久以前就被弃用了，取而代之的是 Icon 匿名对象规范）

proof of concept fiddle

代码 sn-p：

function initialize() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: new google.maps.LatLng(41.0257978, 21.293566),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: true,
    zoomControl: false
  });

  var myIcon = {
    url: 'data:image/svg+xml;utf-8, <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="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
    size: new google.maps.Size(32, 32),
    scaledSize: new google.maps.Size(20, 20)
  };

  google.maps.event.addListener(map, 'click', function(e) {
    var myLatLng = {
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    };
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: myIcon
    });
  });
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: myIcon
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

【讨论】：