如何在Google地圖上正確放置svg標記？

Question

我有一個svg標記，並希望通過javascript api將其放置在Google地圖上。

問題是標記在我縮小地圖時未對齊。

這是我的SVG路徑：

M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4 ，10,4S20,8.4,20,13.8z

new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(33.788303, -118.001511), 
    icon: { 
     path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z", 
     fillColor: '#1193c5', 
     fillOpacity: 1, 
     strokeWeight: 1, 
     strokeColor: 'black' 
    } 
    }); 

從我已經研究過我需要設置標記的錨，但我不知道如何找到這個SVG路徑錨點。

這裏是一個工作示例：https://jsbin.com/gonehocafu/edit?html,js,output

Answer 1

如果你知道圖標的大小，是可計算的。圖標的路徑起點是左上角，到達底部的中間，將x設置爲圖標寬度的1/2，y等於圖標的高度。對於SVG symbol：

anchor |類型：點
符號相對於標記或折線的位置。符號路徑的座標分別由錨的x和y座標向左和向上平移。默認情況下，符號固定在（0，0）處。該位置在與符號路徑相同的座標系中表示。

我通常會使用試錯法。爲了您的圖標看起來像什麼工作原理是：

anchor: new google.maps.Point(10, 27) 

proof of concept fiddle

代碼片段：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(33.788303, -118.001511), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(33.788303, -118.001511), 
 
    icon: { 
 
     path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z", 
 
     fillColor: '#1193c5', 
 
     fillOpacity: 1, 
 
     strokeWeight: 1, 
 
     strokeColor: 'black', 
 
     anchor: new google.maps.Point(10, 27) 
 
    }, 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>