我们需要绘制一个商店标记，并将其与带有商店标记的自定义标记一起绘制为一个图标。我们将“ svg”作为连接文本并进行渲染。尽管它们已正确渲染，但我们无法将图标居中到给定的纬度长点。在缩放/平移时，图标正远离绑定的经度移。
我们很难使用div图标，并且遇到了一些问题。因此，我们使用“ bindTooltip”来渲染复合图标。
请查看下面的示例代码：
var iconText = '"<div><span style="font-size: 10px; color: #000000;">7-ELEVEN #32544<span><br/><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><g stroke-width="1"><path d="M10,1 C6.69166271,1 4,3.69166797 4,7.00001172 C4,7.99317578 4.24830811,8.97790234 4.72035016,9.85132422 L9.67188736,18.8066406 C9.7378052,18.9260313 9.86341824,19 10,19 C10.1365818,19 10.2621948,18.9260313 10.3281126,18.8066406 L15.281478,9.84837109 C15.7516919,8.97790234 16,7.99314062 16,6.99997656 C16,3.69166797 13.3083373,1 10,1 Z M10,10 C8.34583136,10 7.00001758,8.65418359 7.00001758,7.00001172 C7.00001758,5.34583984 8.34583136,4.00002344 10,4.00002344 C11.6541686,4.00002344 12.9999824,5.34583984 12.9999824,7.00001172 C12.9999824,8.65418359 11.6541686,10 10,10 Z" fill="#000000"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="label-class" width="200.75693543198784" height="11.756935431987843"><rect width="10.756935431987843" height="10.756935431987843" stroke-width="0" fill-opacity="0" stroke="#fff" x="0" y="0"/><g><circle cx="5.378467715993921" cy="5.378467715993923" r="3.227080629596353" fill="#0099ff" stroke="#0099ff" stroke-width="1" fill-opacity="1"/><text font-size="10" font-weight="" font-style="" text-decoration="" fill="#000000" x="10.756935431987841" y="-3.137439500996452"><tspan x="10.756935431987841" dy="10.756935431987843">Convenience_Aug 2017: $5.12K</tspan></text></g></svg></div>"';
//myIcon1 is icon with iconSize and iconUrl and iconAnchor properties set.
//iconText above is same as iconUrl in myIcon1
const marker = L.marker([44.1016,-69.3809],{icon: myIcon1});
marker.addTo(map);
marker.bindTooltip(iconText, { direction: 'left', permanent: true});
我希望图标可以锚定在给定的纬度上。它不应远离该位置。