Я хочу заменить кнопку поиска по умолчанию из leaflet-locatecontrol плагин другим в элементе div внутри боковой панели (боковая панель листовки v2).
Вот пример: https://vprint.github.io/#14/13.4413/103.8591
Что я хочу сделать, так это вызвать функцию определения местоположения, когда я нажимаю левую кнопку местоположения (ту, что на левой боковой панели), которая создается с помощью этой строки
<li class = "disabled">
<a href = "#locate" role = "tab" onclick = "LocateMe()">
<i class = "fas fa-map-marker-alt"></i>
</a>
</li>
Я видел параметр «CreateButtonCallback» в документации по поиску плагина, но как я могу использовать его для решения моей проблемы?
Единственная документация, которую я нашел об этом, это вот эта, но я ее не понимаю:
/**
* This callback can be used in case you would like to override button creation behavior.
* This is useful for DOM manipulation frameworks such as angular etc.
* This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
*/
createButtonCallback: function (container, options) {
var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = options.strings.title;
var icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
return { link: link, icon: icon };
},
Вам не нужен onClick на href
<li class = "disabled">
<a href = "javascript:LocateMe()" role = "tab">
<i class = "fas fa-map-marker-alt"></i>
</a>
</li>
РЕДАКТИРОВАТЬ (после редактирования вопроса)
Чтобы ответить на мой собственный вопрос:
Наконец-то я нашел решение после этого трюка: Добавление элемента управления слоем Leaflet на боковую панель
Если вы хотите добавить управление местоположением на боковой панели (или в любом другом плагине), вам нужно создать элемент div внутри класса li следующим образом:
HTML
<li class = "disabled">
<a href = "#LocateMe" role = "tab">
<div id = "#LocateMe"></div>
</a>
</li>
А затем изменить JS
JS
var positioncontrol = L.control.locate({
position: 'topleft',
showCompass: true,
strings: {title: "Location"},
icon: 'fas fa-map-marker-alt',
locateOptions: {enableHighAccuracy: true}
}).addTo(map);
var htmlObject = positioncontrol.getContainer();
var a = document.getElementById('#LocateMe')
function setParent(el, newParent){
newParent.appendChild(el);
}
setParent(htmlObject, a);
Затем вам нужно отредактировать CSS, чтобы он хорошо сочетался с боковой панелью.
Хорошо, спасибо, какие-нибудь советы о том, как вызвать «CreateButtonCallback»?