谷歌地图 - SVG 标记被切断答案

【问题标题】：Google Maps - SVG marker cut off谷歌地图 - SVG 标记被切断
【发布时间】：2017-10-30 18:14:26
【问题描述】：

为什么我的 google.maps.Marker 的 svg 图标被截断了？我尝试了许多 size 和 scaledSize 的组合...

var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: el.lat, lng: el.lon}),
            icon: {
                url: "/images/icons/observation_" + el.rate + ".svg",
                size: new google.maps.Size(20, 20),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(10, 10),
                scaledSize: new google.maps.Size(20, 20)
            },
            zIndex: 6,
            map: map.map
        });

Svg 图标应为 20x20 像素。

https://jsfiddle.net/d3v5huzr/

这是预览：

【问题讨论】：

在小提琴中添加工作代码
@Deep3015 添加了小提琴。

标签： javascript html google-maps svg google-maps-api-3

【解决方案1】：

您必须像这样设置 svg 元素的宽度和高度属性：

<svg height="40px" width="40px" ... >

https://jsfiddle.net/zvtnohyv/

【讨论】：

这个！多年来一直在寻找解决方案，这是解决它的唯一答案。
这个小提琴被人操纵了吗？在那个小提琴上找不到那个代码。

【解决方案2】：

您可以使用events 中的zoom_changed 并添加事件监听器，用于在缩放时刷新标记图标

Fiddle Demo

代码如下

var map;

map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: -34.397,
    lng: 150.644
  },
  zoom: 8
});
var icon = {
  url: "http://svgshare.com/i/1jz.svg",
}
var marker = new google.maps.Marker({
  position: new google.maps.LatLng({
    lat: -34.397,
    lng: 150.644
  }),
  icon: icon,
  /*icon: {
    url: "http://svgshare.com/i/1jz.svg",
    // size: new google.maps.Size(20, 20),
    // origin: new google.maps.Point(5, 5),
    // anchor: new google.maps.Point(10, 10),
    // scaledSize: new google.maps.Size(20, 20)
  },*/
  zIndex: 6,
  map: map
});
google.maps.event.addListener(map, 'zoom_changed', function() {
  marker.setIcon(icon);
});

【讨论】：

没有任何变化，图标仍然被切断。
对我来说仍然切断imgur.com/a/USAhd（在 Chrome 中），在 Firefox 中甚至不显示 svg oO
完全相同的代码是你使用注意var icon = { url: "http://svgshare.com/i/1jz.svg", }将在外面
你能给我看看你的截图吗？因为图标是圆形的，我有 1/4 :)
让我们continue this discussion in chat。