在谷歌地圖中優化SVG標記

有沒有很好的方法來優化Google Maps API v3在爲圖標使用SVG符號時如何將標記繪製到HTML文檔？這裏是一個標記使用SVG符號的一個例子：在谷歌地圖中優化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標記？

來源

2014-02-14 Knut Marius

我使用了很多svg多邊形標記，但是我從svg文件中調用它們。我不記得是否有性能改善與路徑。值得一試的是測試多邊形文件與路徑 –

'optimize'默認設置爲'true'，我不能說出爲什麼（在這種情況下）你會將它設置爲false;也許@geocodezip可以有一些幫助？我不驚訝地看到，「Chrome處理得很好，但IE9 *不*」，但您注意到的問題和/或關於*性能問題的一些詳細信息的實例將會是一個優點。很好的問題btw。 – MrUpsidown

你知道DOM中提供的圖標怎麼樣？我可以爲每個標記看到一個像''canvas width =「14」height =「13」draggable =「false」style =「position：absolute; left：0px; top：0px; -webkit-user-select： none;「>'和一個'transparent.png'圖片。 –

-2

這裏有svg patch for ie，並作爲

<!--[if IE 9]> 
    <script src="svg.js"></script> 
<![endif]-->

來源

2014-03-05 01:07:53

這不是一個補丁。這是一個閃回在老IE不支持SVG的閃回。 OP的問題是性能而不是功能。 – Phil

嘗試[maps as image]（https://developers.google.com/maps/documentation/imageapis/），並使用地圖圖像在地圖中渲染縮放地圖或動作，我使用大圖作爲圖像顯示大量圖標和圖像地圖，以觀察點擊以放大非地圖 –

如何複雜的是要生成SVG圖標會喜歡使用？因爲您也可以自己在畫布對象上繪製圖標，並使用toDataURL方法生成數據 - 用於Google地圖。這實際上會生成一個位圖圖像，以便可以在IE9中工作（至少支持該方法）。

你也可以在畫布上繪製一個SVG，但是如果你想以編程方式改變它們，有一些注意事項。而IE9可能不會合作，所以我不確定這是否應該走。

來源

2017-01-05 21:07:22 Meinaart

根據我的經驗，你可以使用這個腳本，它完美的作品：

var marker = new google.maps.Marker({ 
     position: map.getCenter(), 
     icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 10 
     }, 
     draggable: true, 
     map: map 
    });

此外，如果你能想使用SVG文件來自CSS。

var marker = new google.maps.Marker({ 
     position: map.getCenter(), 
     icon: { 
     path: 'M22-48h-44v43h16l6 5 6-5h16z', 
     fillColor: '#6331AE', 
     fillOpacity: 1, 
     strokeColor: '', 
     strokeWeight: 0 
     }, 
    map_icon_label: '<span class="class_name1 class_name2"></span>', 
    draggable: true, 
    map: map 
});

然後你就可以在class_name1和class_name2添加CSS值帶來的SVG圖像在側方：它可以如下使用。如果要更改標記的背景爲一些常見的方法，我在下面一些常見的標記路徑共享：

MAP PIN = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z'; 
    SQUARE PIN = 'M22-48h-44v43h16l6 5 6-5h16z'; 
    SHIELD = 'M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z'; 
    ROUTE = 'M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z'; 
    SQUARE = 'M-24-48h48v48h-48z'; 
    SQUARE_ROUNDED = 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z';

希望它可以幫助你。

來源

2017-03-04 11:50:03 user2370937

在谷歌地圖中優化SVG標記

回答

相關問題