Question

我正在使用HTML5 Interactive map，我的地图图钉只有一个形状是圆圈，是否可以通过为我的圆圈代码设置其他属性来制作google map pin marker之类的内容：

var points_len = wmConfig['points'].length;
if( points_len > 0){
    var xmlns = "http://www.w3.org/2000/svg";
    var tsvg_obj = document.getElementById("map_points");
    var svg_circle,svg_rect,svg_image;
    for(var i=0;i<points_len;i++){
        if (wmConfig['points'][i]['shape']=="circle"){
            svg_circle = document.createElementNS(xmlns, "circle");
            svg_circle.setAttributeNS(null, "cx", wmConfig['points'][i]['pos_X']);
            svg_circle.setAttributeNS(null, "cy", wmConfig['points'][i]['pos_Y']);
            svg_circle.setAttributeNS(null, "r", wmConfig['points'][i]['diameter']/2);
            svg_circle.setAttributeNS(null, "fill", wmConfig['points'][i]['upcolor']);
            svg_circle.setAttributeNS(null, "stroke",wmConfig['points'][i]['outline']);
            svg_circle.setAttributeNS(null, "stroke-width",wmConfig['points'][i]['thickness']);
            svg_circle.setAttributeNS(null, "id",'map_points_'+i);
            svg_circle.setAttributeNS(null, "data-smallipop-referenced-content",'#map_data_'+i);
            svg_circle.setAttributeNS(null, "title",wmConfig['points'][i]['hover']);
            tsvg_obj.appendChild(svg_circle);
            dynamicAddEvent(i);
        }

Answer 1

您最好使用path代替circle。它更强大。见[这里]）https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths）。

我不是艺术家，但这是你可以实现的目标：http://jsfiddle.net/Lv6s19se/2/

<svg width="64" height="64" viewBox="-16 -18 64 64">
    <path fill="rgba(0,0,0,.2)" stroke="none"
        transform="translate(-2,48) scale(1,0.5) rotate(40) translate(0,-46)"
        d="M0,47 Q0,28 10,15 A15,15 0,1,0 -10,15 Q0,28 0,47"/>
    <path fill="#d53" stroke="black" stroke-width="1"
        d="M0,47 Q0,28 10,15 A15,15 0,1,0 -10,15 Q0,28 0,47"/>
    <circle cx="0" cy="4" r="4" fill="black" stroke="none"/>
</svg>

如何使用SVG JS绘制谷歌地图上的pin标记？

1 个答案: