Google 地图 Javascript api 缩放问题与 svg 标记

Question

我有一个简单的地图，其中包含 svg 文件作为标记图标。 加载地图时没有问题，但是，如果我尝试放大或缩小，图像会变大并被截断。 此行为因浏览器而异：

• Google Chrome 启动正常，但如果您尝试缩放，就会暴露问题。
• Safari 运行良好
• Firefox 什么也不显示

我认为这是一个与 svg 相关的问题，但我找不到错误在哪里。 我用这段代码创建了一个 jsfiddle

var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(52.373743,4.893114)
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var icon = {
    url: "http://filippopoderini.com/marker-07.svg",
    anchor: new google.maps.Point(23,60),
    scaledSize: new google.maps.Size(46,60)
}

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

这是 svg 代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-2339.1 129.2 289 375" style="enable-background:new -2339.1 129.2 289 375;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#32ABDF;stroke:#424242;stroke-width:3;stroke-miterlimit:10;}
    .st1{fill:#A9A9A9;stroke:#424242;stroke-width:3;stroke-miterlimit:10;}
    .st2{fill:#424242;}
    .st3{fill:#FFFFFF;}
    .st4{fill:#32ABDF;}
</style>
<g>
    <path class="st2" d="M-2298,370.3L-2298,370.3c-5-5.3-9.5-10.9-13.5-16.8c-16.1-23.5-24.6-51.1-24.6-79.7
        c0-78,63.5-141.5,141.5-141.5s141.5,63.5,141.5,141.5c0,28.6-8.5,56.2-24.6,79.7c-4,5.9-8.6,11.6-13.5,16.8l-0.1,0.1l-103.4,129.1
        L-2298,370.3z"/>
    <path class="st3" d="M-2194.6,135.2c37,0,71.8,14.4,97.9,40.6c26.2,26.2,40.6,60.9,40.6,97.9c0,28-8.3,55-24,78
        c-3.9,5.8-8.4,11.3-13.2,16.5l-0.2,0.2l-0.1,0.2l-101,126.1l-101-126.1l-0.1-0.2l-0.2-0.2c-4.8-5.1-9.2-10.6-13.1-16.4
        c-15.8-23-24.1-50-24.1-78c0-37,14.4-71.8,40.6-97.9C-2266.3,149.6-2231.6,135.2-2194.6,135.2 M-2194.6,129.2
        c-79.8,0-144.5,64.7-144.5,144.5c0,30.2,9.3,58.2,25.1,81.4h0l0,0c4.1,6,8.7,11.8,13.7,17.1l105.7,132l105.7-131.9
        c5-5.4,9.6-11.1,13.7-17.2l0,0c15.8-23.2,25.1-51.2,25.1-81.4C-2050.1,193.9-2114.8,129.2-2194.6,129.2L-2194.6,129.2z"/>
</g>
<g>
    <path class="st3" d="M-2194.6,198.3c-0.6,0-1.3,0.3-1.7,0.7l-56.7,59c-0.9,0.9-0.9,2.4,0.1,3.3c0.9,0.9,2.5,0.9,3.4-0.1l7.5-7.8
        v63.2h30.8v-54.5h33.2v54.5h30.8v-63.2l7.5,7.8c0.5,0.5,1.1,0.7,1.7,0.7c0.6,0,1.2-0.2,1.7-0.7c0.9-0.9,1-2.4,0.1-3.3l-56.7-59
        C-2193.3,198.5-2193.9,198.3-2194.6,198.3z M-2170.8,210v7.2l14.2,14.8v-22H-2170.8z M-2206.4,266.9v49.8h23.7v-49.8H-2206.4z"/>
</g>
</svg>

Answer 1

地图缩放更改后，尝试

显式地更新标记图标，如下所示：

google.maps.event.addListener(map, 'zoom_changed', function() {
  marker.setIcon(icon);
});  

修改了

jsFiddle

function initMap() {

  var map;
  var polyLine;
  var polyOptions;



  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(52.373743, 4.893114)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var icon = {
    url: "http://filippopoderini.com/marker-07.svg",
    //anchor: new google.maps.Point(23, 60),
    //scaledSize: new google.maps.Size(46, 60),
    size: new google.maps.Size(46, 60)
  }

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

  google.maps.event.addListener(map, 'zoom_changed', function() {
      marker.setIcon(icon);
  });  

}


google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas { 
    height: 400px; 
}

<script src="https://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>

附注已在 Chrome 中验证

v51

Answer 2

我也遇到了同样的问题，经过一番调试后解决了。我错过了 SVG 本身的宽度/高度。它需要与 viewBox 具有相同的宽度/高度。然后，SVG 在放大/缩小时会正确调整大小。