Javascript 如何使用svg绘制像google地图上那样的pin位置标记

我使用的是HTML5交互式地图，我的地图pin只有一个形状，那就是圆形，是否可以通过为我的圆形代码设置其他属性来制作类似于谷歌地图pin标记的形状：

var pins_config = {
  "pins":[
  {
    "shape": "circle",//either "circle" or "square"
    "hover": "<b><u>DELHI</u></b><br>Write any text and load images<br><img src='example.png'>",//info of the popup
    "pos_X": 185,//check the X, Y coordinates guide in the documentation
    "pos_Y": 195,
    "size": 14,//size of the pin
    "outline": "#660000",//outline color of the pin
    "upColor": "#e60000",//color of the pin when map load
    "overColor": "#ffd480",//color of the pin when mouse hover
    "url": "https://www.google.com/",//link to any webpage
    "target": "new_window",// use "new_window", "same_window", "modal", or "none"
    "active": true//true/false to activate/deactivate this pin
  }  
  ]
};

// The following is the script for pins interaction DON'T EDIT !!!
function isTouchEnabled() {
  return (("ontouchstart" in window)
    || (navigator.MaxTouchPoints > 0)
    || (navigator.msMaxTouchPoints > 0));
}
jQuery(function () {
  var pins_len = pins_config.pins.length;
  if(pins_len > 0) {
    var xmlns = "http://www.w3.org/2000/svg";
    var tsvg_obj = document.getElementById("injspins");
    var svg_circle, svg_rect;
    for (var i = 0; i < pins_len; i++) {
      if (pins_config.pins[i].shape === "circle") {
        svg_circle = document.createElementNS(xmlns, "circle");
        svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X + 1);
        svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y + 1);
        svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
        svg_circle.setAttributeNS(null, "fill", "rgba(0, 0, 0, 0.5)");
        tsvg_obj.appendChild(svg_circle);
        svg_circle = document.createElementNS(xmlns, "circle");
        svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X);
        svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y);
        svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
        svg_circle.setAttributeNS(null, "fill", pins_config.pins[i].upColor);
        svg_circle.setAttributeNS(null, "stroke", pins_config.pins[i].outline);
        svg_circle.setAttributeNS(null, "stroke-width", 1);
        svg_circle.setAttributeNS(null, "id", "injspins_" + i);
        tsvg_obj.appendChild(svg_circle);
        injsAddEvent(i);
      }
    }
  }
});

var引脚配置={
“别针”：[
{
“形状”：“圆”//“圆”或“方”
“悬停”：“写入任何文本并加载图像”
，//弹出窗口的信息
“pos_X”：185，//检查文档中的X，Y坐标指南
“pos_Y”：195，
“尺寸”：14，//销的尺寸
“轮廓”：“#660000”，//针的轮廓颜色
“upColor”：“#e60000”//加载贴图时管脚的颜色
“过彩色”：“#ffd480”//鼠标悬停时针脚的颜色
“url”：”https://www.google.com/“，//链接到任何网页
“目标”：“新建窗口”，//使用“新建窗口”、“相同窗口”、“模态”或“无”
“激活”：true//true/false激活/停用此pin
}  
]
};
//以下是PIN交互的脚本不要编辑！！！
函数isTouchEnabled（）{
返回（（“窗口中的ontouchstart”）
||（navigator.MaxTouchPoints>0）
||（navigator.msmax触点>0））；
}
jQuery（函数（）{
var pins\u len=pins\u config.pins.length；
如果（引脚长度>0）{
var xmlns=”http://www.w3.org/2000/svg";
var tsvg_obj=document.getElementById（“injspins”）；
var svg_circle，svg_rect；
对于（变量i=0；i

我想要这样的东西

---

您需要这样的东西（未经测试）：

---

然后尝试将pin

形状设置为
“flag”
您是仅限于jQuery还是也可以使用D3？@MichaelRovinsky。我不能用D3。它仅限于jQuery绘制和填充一个多段线元素来代替圆：谢谢。它的工作如预期。
if (pins_config.pins[i].shape === "circle") {
  svg_circle = document.createElementNS(xmlns, "circle");
  svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X + 1);
  svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y + 1);
  svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
  svg_circle.setAttributeNS(null, "fill", "rgba(0, 0, 0, 0.5)");
  tsvg_obj.appendChild(svg_circle);
  svg_circle = document.createElementNS(xmlns, "circle");
  svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X);
  svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y);
  svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
  svg_circle.setAttributeNS(null, "fill", pins_config.pins[i].upColor);
  svg_circle.setAttributeNS(null, "stroke", pins_config.pins[i].outline);
  svg_circle.setAttributeNS(null, "stroke-width", 1);
  svg_circle.setAttributeNS(null, "id", "injspins_" + i);
  tsvg_obj.appendChild(svg_circle);
  injsAddEvent(i);
}
else if (pins_config.pins[i].shape === "flag") {
  let sz = pins_config.pins[i].size;
  // construct a path in the shape of the flag
  svg_flag = document.createElementNS(xmlns, "path");
  svg_flag.setAttribute("d", ['M',
                              pins_config.pins[i].pos_X,
                              pins_config.pins[i].pos_Y,
                              'v', -sz,
                              'l', sz * 0.75, sz * 0.25,
                              'l', -sz * 0.75, sz * 0.25].join(' '));
  svg_flag.setAttribute("fill", pins_config.pins[i].upColor);
  svg_flag.setAttribute("stroke", pins_config.pins[i].outline);
  svg_flag.setAttribute("stroke-width", 1);
  svg_flag.setAttribute("id", "injspins_" + i);
  tsvg_obj.appendChild(svg_flag);
  injsAddEvent(i);
}