err*_*old 9 icons svg google-maps resize marker
我在谷歌地图中调整图标大小有问题.我有一个svg文件让它响应.
这就是我调用svg文件的方式
MyGreenSVG = {
url: 'greenFill.svg',
size: new google.maps.Size(20, 35)
};
Run Code Online (Sandbox Code Playgroud)
属性:大小不会改变我的图标大小,但只会裁剪它.唯一的方法是改变我的svg文件中的宽度和高度,并制作它的2个版本.所以我放松了使用svg的兴趣......
这是我的svg文件的预览:
<svg version="1.1"
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve">
Run Code Online (Sandbox Code Playgroud)
kap*_*lan 17
我也无法调整大小scale.我确实发现,如果我使用a MarkerImage然后我可以缩放svg并且它看起来相当不错,比png更好的方式.如果我使用的是MarkerImage,我不认为这是一个"符号".
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: new google.maps.MarkerImage('icons/myIcon.svg',
null, null, null, new google.maps.Size(200,200)),
draggable: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Run Code Online (Sandbox Code Playgroud)
我还在寻找更好的解决方案.
更新(04/14/2015)
将MarkerImage对象转换为Icon类型
在Google Maps JavaScript API版本3.10之前,复杂图标被定义为MarkerImage对象.Icon对象文字已在3.10版本中添加,并从3.11版本开始替换MarkerImage.Icon对象文字支持与MarkerImage相同的参数,允许您通过删除构造函数,将先前的参数包装在{}中并添加每个参数的名称,轻松地将MarkerImage转换为Icon.例如:
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
Run Code Online (Sandbox Code Playgroud)
变
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
Run Code Online (Sandbox Code Playgroud)
我正在玩这个size并且在这里scaledSize有一个例子.好像我可以评论出来size并且scaledSize工作正常.如果size小于scaledSize图形被切断.
正如卡普兰指出的那样,你可以用size和调整SVG标记的大小scaledSize.在我的情况下,结果仍然是错误的 - 相同图标的一些实例被正确呈现,其他实例在地图上留下了奇怪的文物.
我在一个非常简单的方法解决了这个问题:我定义width和height在<svg>元素.
小智 -1
有同样的问题,它通过使用比例解决:
MyGreenSVG = {
url: 'greenFill.svg',
scale: 0.5
};
Run Code Online (Sandbox Code Playgroud)
奇怪的是,我昨天花了一个小时试图让它工作,但没有成功,今天我将数字从 0.3 更改为 0.2 并且工作完美。所以要小心缓存之类的东西。
| 归档时间: |
|
| 查看次数: |
16546 次 |
| 最近记录: |