javascript - 谷歌地图 - SVG 标记被切断

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

为什么我的 google.maps.Marker svg 图标被 chop 了? 我尝试了很多 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/

这是预览: Google Maps SVG markers

最佳答案

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

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

https://jsfiddle.net/zvtnohyv/

关于javascript - 谷歌地图 - SVG 标记被切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44259384/

相关文章:

javascript - 谷歌地图 addListener 无法正常工作

javascript - 如何在谷歌地图图钉上添加文本标签?

javascript - 使用 RegExp 的 Facebook 注册插件

javascript - 这两个正则表达式有什么区别? (理解?量词)

javascript - 跨同一域但使用不同端口的页面的本地存储

java - java.lang.NoClassDefFoundError:com.google.maps.GeoApiContext $ Builder

JavaScript 在一个简单的猜谜游戏的函数上返回 null

javascript - 关联数组查找(来自 Three.js 中的代码)

html - 侧边栏不会填充 100% 高度 :(

javascript - 随机/随机化一组具有两个子元素的 div