如何在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>