Como puedo mostrar en un modal, los detalles de un pin de un mapa de Leaflet

Estoy desarrollando un mapa en LeafLet y Laravel 6. Груз Desde una ruta todos los marcadores que después muestro en el mapa.

Танго En el controlador este método подставляет el que obtengo todos los marcadores publicados.

public function getInstallations(){
    $installations = Installation::where('status', 'PUBLISHED')->get();

    $data = [];
    foreach ($installations as $key => $value) {
        $data[$key + 1] = [
            'id' => $value->id,
            'uuid' => $value->uuid,
            'user_id' => $value->user_id,
            'category_id' => $value->category_id,
            'company' => $value->company,
            'name' => $value->name,
            'lat' => $value->lat,
            'lng' => $value->lng,
            'description' => $value->description,
            'on_grid' => $value->on_grid,
            'created_at' => $value->created_at,
            'pin' => $value->pin,
        ];
    }
    return response()->json($data);
}

Luego en la vista en la parte de JS hago lo siguiente:

var map = L.map('mapid').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

Переменные Las

{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }}

Конфигурация Las defino en un archivo de configuración de Leaflet que tengo alojado en la carpeta de la aplicacion de laravel

continuación accedo desde JS а-ля ruta de los datos y los alojo en la variable getData:

let getData = `{{ route('getInstallations') }}`;

    const api = new XMLHttpRequest();
    api.open('GET', getData, true);
    api.send();

    var marker = {};

    api.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {
            let datos = JSON.parse(this.responseText);
            $.each(datos, function(index, item) {
                var instIcon = L.icon({
                    iconUrl: `/images/` + item.pin ,
                    iconSize:     [22, 32],     // size of the icon
                    iconAnchor:   [11, 32],     // point of the icon which will correspond to marker's location
                    popupAnchor:  [0, -33]      // point from which the popup should open relative to the iconAnchor
                });

                marker = new L.marker([item.lat, item.lng], {icon: instIcon})
                    .bindPopup('
' + '

' ).addTo(map); }); $(document).ready(function(){ $(document).on('click', '.sendData', function(){ var id=$(this).val(item.id); var selector = '.modalTitle' + item.id; alert(selector); var name = $(selector).text(); $(".modalTitle").html(name); }); }); } }

Convierto el getData otra переменная datos y lo recorro параграф crear Лос marcadores. Алгоритм El resultado es Комо esto:

introducir la descripción de la imagen aquí

Сосны En la construcción de esos, les defino la opción de que posean un popup que se mostraría en:

introducir la descripción de la imagen aquí

El objetivo es que haciendo clic en "DETALLES" se abra ООН, модальная начальная загрузка de надела sus довода "против" pueda mostrar el detalle del registro, воображает asociadas.

El codigo del formulario модальный es de bootstrap 4:


El problema que tengo es que no puedo mandar los datos через ese boton generado en el código de js... si alguien puede darme una mano... se Лос recontra agradeceria

2
задан 21.12.2019, 02:26
1 ответ

Мы идем по частям, сначала она lГіgica из модального он приходит:

  1. Ты Выбираешь marker в карте.
  2. Появляется popup pequeГ±o с одним botГіn видения деталей.
  3. , Если ты даешь ему click в botГіn видения деталей, должен выходить у тебя модальный с данными marker

Итак, мы пере-формулируем cГіdigo, что у тебя есть:

marker = new L.marker([item.lat, item.lng], {icon: instIcon})
                .bindPopup('<p class="popup__header"> <strong>'+ item.name + '</strong><div class="separator-2"></div>' + '<button type="button" id="sendData" class="btn btn-success btn-sm btn-block dataModal sendData" data-toggle="modal" data-target="#dataModal" >Detalles</button> </p>' ).addTo(map);

AquГ - ты определяешь Id и класс как sendData, который мне кажется чем-то extraГ±o, рекомендует избегать использовать то же имя для идентификации и класса, ты уберегаешься ненужная путаница. Если ты всегда будешь производить popups с тем же самым, llegarГЎ момент, где DOM был сделан, поместил взвешенный и шага cГіdigo смоги осложняться.

Для debuggear в способе Шерлок Холмс мы осведомляемся на модальном: ВїSerГЎ reusable? ВїNecesitarГ©, что тот же самый Пойдите, держитесь? Чтобы решать лучшего способа эти вопросы, давайте видеть следующую часть cГіdigo:

$(document).ready(function() {
    $(document).on('click', '.sendData', function() {
        var id = $(this).val(item.id);
        var selector = '.modalTitle' + item.id;
        alert(selector);
        var name = $(selector).text();
        $(".modalTitle").html(name);
    });
});

Давайте Делать паузу aquГ-. ВїEs необходимый document ready? Нет, Вїpor quГ©? Потому что это не очень нужно, чтобы работал один mГ©todo внутри одной funciГіn, что уже он загрузил весь документ, сказанный по-другому, если мы лишаем его document ready igualito funcionarГЎ. ВїY в quГ© момент нам нужно, чтобы работал document ready? Итак, когда pГЎgina он будет загружать ее впервые, и ты нуждаешься в том, чтобы инициализировать стоимость внутри <select options>, переменных состояния и вещей из-за стиля.

В ней lГ-nea следующий мы находим один event listener. Мы делаем другую паузу и анализируем: ВїCuГЎl - цель этого event listener? SegГєn наблюдаемое, что хочется делать, состоит в том, чтобы получать стоимость элемента, который кликнул, чтобы переходить, когда выбирать идентификацию фрагмента cГіdigo HTML, что deberГ,, - которые должны присутствовать. Итак, существуют такие альтернативы как следующая:

Производить одну funciГіn отдельно, что получает прямо идентификацию и называет модального вместо того, чтобы быть в слушание события click. Выражение в cГіdigo:

function verDetallesDelPopup(elementID) {
    var selector = '.modalTitle' + elementID;
    alert(selector);
    var name = $(selector).text();
    $(".modalTitle").html(name);
}

И это мы это призываем с:

marker = new L.marker([item.lat, item.lng], {icon: instIcon})
            .bindPopup('<p class="popup__header"> <strong>'+ item.name + '</strong><div class="separator-2"></div>' + '<button type="button" onclick="verDetallesDelPopup(' + item.id +')" class="btn btn-success btn-sm btn-block dataModal" data-toggle="modal" data-target="#dataModal" >Detalles</button> </p>' ).addTo(map);

NГіtese, что eliminГ© Id и class "sendData".

До aquГ, - мы в порядке. Первая деталь, которая волнует меня: Ее funciГіn verDetallesDelPopup, мы делаем другой селектор, чтобы извлекать имя и это помещаем внутри ВСЕХ элементов, которые содержат так называемый класс modalTitle, согласно cГіdigo, он находится в модальном конца вопроса:

<h5 class="modal-title modalTitle" id="dataModalLabel"></h5>

, Поскольку - Гєnico элемент, serГ - в mГЎs работоспособный называть это селектором #dataModalLabel таким образом:

    $("#dataModalLabel").html(name);

Вторая информация, которая волнует меня, видеть комментарии внутри cГіdigo:

function verDetallesDelPopup(elementID) {
    var selector = '.modalTitle' + elementID; 
    //Aquí, en el selector, ¿en qué momento generas todos los modalTitle seguidos de cada elementID?
    alert(selector);
    var name = $(selector).text();
    $(".modalTitle").html(name);
}

Последует за тем, что, если элементы селектора несуществующие, он будет бросать в тебя ошибку, asegГєrate имения их или, изменять поведение этого cГіdigo для того, чтобы он приспособился лучше к тому, что у тебя есть.

3
ответ дан 21.12.2019, 12:13
  • 1
    Спасибо @fredyfx!!! Если, есть вещи, которые я должен проверять. В немного я это применяю, и если оно функционирует, показываю как quedó!!! – MNibor 21.12.2019, 03:35
  • 2
    Функционируй... однако из-за elementID enví или id закладки, но podrí чтобы прилагать в названный эту funció n оставшаяся часть данных о закладке? Я хочу сказать, если podrí чтобы посылать, из-за этого события onclick descripció n, user_id, created_at... и получать это в funció n? или посылать array и потом пробегать это внутри funció n? – MNibor 21.12.2019, 05:18
  • 3
    Просвет, что sí. Все возможное в viñ в señ or :D я вижу, что ты принял ответ, ¿ тебе удалось заставить это функционировать как querí эксперт или ты pasó мышь и ты принял ответ случайно queriendo как dirí в мальчика 8? – fredyfx 21.12.2019, 05:24
  • 4
    Функционируй если!!! logré печатать в модальном идентификацию закладки, и он соответствует ids, которые у них есть в bd, как он соответствует, но например я захотел произойти вместо id, ямс тогда в onclick я поместил " item.name" но там уже оно не функционирует... я делаю onclick =" sendData (' + item.id, item.name, item.description + ') " и в функции function sendData (elementID, dataName, dataDescription) и скрой кнопку... – MNibor 21.12.2019, 05:34
  • 5
    После: item.id + ' ' + item.name + ' ' +... И ты сделал ее – fredyfx 21.12.2019, 06:07