Есть ли способ контролировать перемещение пользовательских значков при увеличении листовки - PullRequest
Новая
       22

Есть ли способ контролировать перемещение пользовательских значков при увеличении листовки

0 голосов
/ 02 мая 2019

У нас есть требование построения маркера магазина и вместе с ним пользовательского маркера с маркером магазина, делающего его одним значком. Мы получаем 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});

Я ожидаю, что иконка будет привязана к заданному лату долго. Оно не должно уходить с места.

...