使用divIcon将图像添加到传单中的空白svg图像中

时间:2018-12-29 14:36:13

标签: leaflet

我正在尝试创建一个用于传单地图的divIcon。我可以使用SVG图像代码创建带有空白圆圈的标记,但是我想在圆圈内添加图像。这可能吗?我已经尝试过背景图片等,但是没有用。

代码是

var iconSettings = {
        mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{mapIconColor}" stroke="#FFF" stroke-width="6" stroke-miterlimit="10" d="M126 23l-6-6A69 69 0 0 0 74 1a69 69 0 0 0-51 22A70 70 0 0 0 1 74c0 21 7 38 22 52l43 47c6 6 11 6 16 0l48-51c12-13 18-29 18-48 0-20-8-37-22-51z"/><circle fill="{mapIconColorInnerCircle}" cx="74" cy="75" r="61"/><circle fill="#FFF" cx="74" cy="75" r="{pinInnerCircleRadius}"/></svg>',
        mapIconColor: '#cc756b',
        mapIconColorInnerCircle: '#fff',
        pinInnerCircleRadius:48
    };

// icon normal state
var divIcon = L.divIcon({
    className: "leaflet-data-marker",
  html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
  iconAnchor  : [12, 32],
  iconSize    : [50, 60],
  popupAnchor : [0, -28]
});

0 个答案:

没有答案