Как использовать «createButtonCallback» из leaflet-locatecontrol

Я хочу заменить кнопку поиска по умолчанию из 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 };
},
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
500
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам не нужен onClick на href

<li class = "disabled">

    <a href = "javascript:LocateMe()" role = "tab">
        <i class = "fas fa-map-marker-alt"></i>
    </a>

</li>

РЕДАКТИРОВАТЬ (после редактирования вопроса)

Хорошо, спасибо, какие-нибудь советы о том, как вызвать «CreateButtonCallback»?

vprint 28.07.2019 21:29
Ответ принят как подходящий

Чтобы ответить на мой собственный вопрос:

Наконец-то я нашел решение после этого трюка: Добавление элемента управления слоем 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, чтобы он хорошо сочетался с боковой панелью.

Другие вопросы по теме