在为图标使用SVG符号时,是否有很好的方法可以优化Google Maps API v3如何在HTML文档中绘制标记?以下是使用SVG符号的标记示例:
var star = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow'
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: star,
map: map,
optimized: true //Does not seem to do anything..
});
谷歌有一个名为“优化”的属性,可以在标记上设置,当使用例如PNG图标而不是SVG图形时,这可以正常工作:谷歌每个图块创建一个单独的画布而不是每个图标一个图像,这显然更好地缩放 .
然而,使用SVG标记时,“优化”属性似乎没有做任何事情:它们似乎总是在每个标记的一个画布中绘制 . 当我有许多标记时,某些浏览器会出现性能问题 . Chrome通常可以很好地处理它,但IE9例如在显示重大性能问题之前不会处理许多标记 . 在这种情况下,群集不是一种选择 .
有谁知道优化这个的好方法,以便浏览器可以同时处理更多的SVG标记?
3 回答
您生成的SVG图标有多复杂?因为您还可以自己在画布对象上绘制图标,并使用toDataURL方法生成数据uri以便在Google Maps中使用 . 这实际上会生成一个位图图像,因此可能在IE9中起作用(至少支持该方法) .
您还可以在画布上绘制SVG,但如果您想以编程方式更改它们,则需要注意一些事项 . IE9可能不会合作,所以我不确定这是否可行 .
根据我的经验,你可以使用这个脚本,它完美地工作:
此外,如果您可以从css使用SVG文件 . 它可以使用如下:
然后,您可以在class_name1和class_name2中添加CSS值,以将svg图像放在正方形的旁边 . 如果您想将标记的背景更改为一些常用方法,我在下面分享了一些常见的标记路径:
希望它能帮到你 .
在这里svg patch for ie,你将使用像