使用svg標記進行縮放時Google Maps標記對齊問題

由於某些原因，當使用路徑定義的svg標記進行放大和縮小時，標記未正確對齊到其位置。這在one of google's examples中很明顯。使用svg標記進行縮放時Google Maps標記對齊問題

有趣的是，如果我們使用built in svg symbols之一，這似乎不是一個問題。

我使用這個SVG路徑作爲我的標記，它也是從對齊問題遭受：

M 256,480c-84.828,0-153.6-68.157-153.6-152.228c0-84.081, 153.6-359.782, 153.6-359.782s 153.6,275.702, 153.6,359.782C 409.6,411.843, 340.828,480, 256,480z M 255.498,282.245c-26.184,0-47.401,21.043-47.401,46.981c0,25.958, 21.217,46.991, 47.401,46.991c 26.204,0, 47.421-21.033, 47.421-46.991 C 302.92,303.288, 281.702,282.245, 255.498,282.245z

是什麼這個問題的原因是什麼？

編輯：感謝MrUpsidown解決問題。 SVG需要在畫布的（0,0）處具有其錨點。

看到這個圖像（我使用的插畫家，但其他任何SVG編輯應用程序應該做的）： enter image description here

更新小提琴這裏：http://jsfiddle.net/tf83z/

來源

2014-06-27 F21

你必須定義你的SVG標記的錨點。

參見文檔：https://developers.google.com/maps/documentation/javascript/reference#Icon

錨：在該對應關係中以錨定的圖像的地圖上的標記的位置的位置。默認情況下，錨點位於圖像底部的中心點。

找到正確的點可能會非常棘手，但它通常在使用對稱符號時的路徑值之間，並且您希望將其錨定在路徑邊緣上。

var icon = { 

    path: "M 256,480c-84.828,0-153.6-68.157-153.6-152.228c0-84.081, 153.6-359.782, 153.6-359.782s 153.6,275.702, 153.6,359.782C 409.6,411.843, 340.828,480, 256,480z M 255.498,282.245c-26.184,0-47.401,21.043-47.401,46.981c0,25.958, 21.217,46.991, 47.401,46.991c 26.204,0, 47.421-21.033, 47.421-46.991 C 302.92,303.288, 281.702,282.245, 255.498,282.245z", 
    fillColor: '#FFFF00', 
    fillOpacity: .6, 
    anchor: new google.maps.Point(255.498,-26.204), 
    strokeWeight: 0, 
    scale: .25, 
    rotation: 180 
}

JSFiddle demo

我已經添加了參考默認標記。

來源

2014-06-27 12:17:36 MrUpsidown

感謝您的回答！還有幾個問題：1.你如何找到定位點？有一些工具嗎？ 2.我在插圖中旋轉了路徑，使其面向正確的方向，我們不需要設置'旋轉'：'M721,216c84.8,0,153.6,68.2,153.6,152.2C874.6,452.3,721,728,721,728S567.4,452.3,567.4 ，368.2 C567.4,284.1,636.2,216,721,216z M721.5,413.7c26.2,0.47.4-21,47.4-47c0-26-21.2-47-47.4-47c-26.2,0-47.4,21-47.4,47 C674。 1,392.7,695.3,413.7,721.5,413.7z'如果默認錨是底部中心點，爲什麼旋轉後的圖像中仍存在問題？ – F21

你的新路徑似乎不適合我。你能把我的小提琴叉在鏈接上嗎？我不知道是否有找到定位點的工具。我通常從0,0開始，然後嘗試按照我的想法居中。也許有一種技術，但我不知道。 – MrUpsidown

不知道爲什麼當我發佈路徑時發生，但這裏是分叉小提琴：http://jsfiddle.net/N63jN/ – F21

使用svg標記進行縮放時Google Maps標記對齊問題

回答

相關問題