谷歌地图-SVG标记被截断

Question

为什么我的谷歌地图标记的svg图标被截断了？我尝试过多种大小和比例组合...

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/

这是预览:

- Skodsgn

---

在fiddle中添加可工作的代码。 - Deep 3015

@Deep3015 已添加 fiddle。 - Skodsgn

Answer 1

您需要像这样设置SVG元素的宽度和高度属性：

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

https://jsfiddle.net/zvtnohyv/

- Vyacheslav Nazarov

---

这个！我已经寻找解决方案很久了，这是唯一能解决问题的答案。 - BIOSTALL

这个代码片段是否被篡改了？那段代码在这个代码片段中找不到。 - Chasen Bettinger

Answer 2

您可以使用 zoom_changed 事件从 事件文档 中添加事件监听器，以便在缩放地图时刷新标记图标。

演示代码

以下是代码：

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);
});

- Deep 3015

---

没有任何改变，图标仍然被截断。 - Skodsgn

对我来说仍然在Chrome中被切断http://imgur.com/a/USAhd，在Firefox中甚至不显示svg oO。 - Skodsgn

请注意，您正在使用的代码中，var icon = { url: "http://svgshare.com/i/1jz.svg", } 将在外部。 - Deep 3015

你能给我看一下你的屏幕截图吗？因为图标是圆形的，而我只有四分之一的大小 :) - Skodsgn

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/145529/discussion-between-deep-3015-and-sko。 - Deep 3015