Создание нескольких всплывающих подсказок из базы данных - PullRequest
Новая
       25

Создание нескольких всплывающих подсказок из базы данных

0 голосов
/ 24 января 2020

Я конвертирую свои нынешние скрипты карты из Google в Leaflet. У меня есть карта с 5 слоями, каждый с несколькими местоположениями, которые хранятся в таблице базы данных. У меня есть две процедуры в процессе. Первый собирает данные из базы данных и создает файл XML, который передается второму. Затем второй анализирует файл XML и создает отдельное содержимое L.marker следующим образом: 

for (var i = 0; i < numMarkers; i++) {
    var mkrType = markers[i].getAttribute("type");
    var mkrName = markers[i].getAttribute("name");
    var mkrLat  = markers[i].getAttribute("lat");
    var mkrLon  = markers[i].getAttribute("lon");

    var mkrIcon = "files_images/mis_images/icon_tri_green.png"; break;

    var mkrText = "<b>" + mkrName + "</b><br>Lat:&nbsp;" + mkrLat + "&nbsp;&nbsp;Lon:&nbsp;" + mkrLon;
    L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(cemeteries);
}

Сценарий создает (Uncaught TypeError: t.addLayer не является функцией) в последней строке для l oop (L.marker).

Я считаю, что ошибка в том, что петля / L.marker находится внутри функции. Если да, что и как мне передать, что нужно для работы кода.

TIA для любой помощи

jdadwilson

Ответы [ 2 ]

0 голосов
/ 25 января 2020

Мои плохие ... Кладбища были определены, я не предоставил все функции. Вот оно ... 

function init_all_map(lyrActive) { 'use strict';

    var cemeteries = L.layerGroup(),
        churches   = L.layerGroup(),
        markers    = L.layerGroup(),
        schools    = L.layerGroup(),
        towns      = L.layerGroup();
    var overlays   = { "Cemeteries": cemeteries, "Churches": churches, "Markers": markers, "Schools": schools, "Towns": towns };

    var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                 '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        mbUrl  = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
        msGeo  = window.SERVER_PATH + 'files_geojson/geopoly_holmes.json';

    var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'),
        county  = new L.GeoJSON.AJAX(window.SERVER_PATH + "files_geojson/geopoly_holmes.json", {style: {color: "DarkGray", weight: 2, fillColor: ""}} );
    var baseLayers = {"Streets": streets, "County": county};

    var map = L.map('map_canvas_lg', {center: [CO_CENTER_LAT, CO_CENTER_LON], zoomControl: true, zoom: 10, minZoom: 8, maxZoom: 14,
                                      layers: [streets, county, cemeteries, churches, markers, schools, towns]});

    var lyrName = ["cemeteries", "churches", "markers", "schools", "towns"];
    var lyrType = ["cem", "chu", "mkr", "sch", "twn"];
    var numLays = lyrType.length;

    var xmlType,
        thisLayer,
        newIcon;

    for ( i=0; i<numLays; i++ ) {
        //console.log("Layer: " + lyrType[i]);
        thisLayer = lyrName[i];
        console.log("thisLayer: " + thisLayer);
        switch(lyrType[i]) {
            case "cem":
                xmlType  = window.SERVER_PATH + "files_xml/xml_cemeteries.php";
                newIcon  = window.SERVER_PATH + "files_images/mis_images/icon_tri_green.png";
                break;
//
// Other cases removed for brevity
//
        }   // End of switch

        var mkrIcon = L.icon({ iconUrl: newIcon,shadowUrl: '',iconSize: [13,13],shadowSize: [0,0],iconAnchor: [7,13],shadowAnchor: [0,0],popupAnchor: [0,0]});

        var xmlData = downloadUrl(xmlType, function(data) {
            var xml = xmlParse(data);
            var markers = xml.getElementsByTagName("marker");
            var numMarkers = markers.length;
            for (var j = 0; j < numMarkers; j++) {
                var mkrType = markers[j].getAttribute("type");
                var mkrName = markers[j].getAttribute("name");
                var mkrLat  = markers[j].getAttribute("lat");
                var mkrLon  = markers[j].getAttribute("lon");
                var mkrText = "<b>" + mkrName + "</b><br>Lat:&nbsp;" + mkrLat + "&nbsp;&nbsp;Lon:&nbsp;" + mkrLon;
                L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(**lyrName[i]**);
            }   // End of Marker (j) loop
        });   // End of downloadUrl
        lyrName[i] = L.layerGroup().addTo(map);
    }   // End of layer (i) loop
    L.control.layers(overlays).addTo(map);
    window.dispatchEvent(new Event('resize'));
}

Эта строка ... 

L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(**lyrName[i]**);

выдает следующую ошибку ... 

TypeError: Cannot read property 'addLayer' of undefined

Если я изменю lyrName [ я] к кладбищам слой заполняется по желанию.

Снова TIA для любой помощи. jdadwilson

0 голосов
/ 25 января 2020

Ваш слой cemeteries не определен.

Вы можете создать группу слоев / FeatureGroup (такая же, но с большим количеством функций) с помощью var cemeteries= L.featureGroup().addTo(map). Добавьте эту строку перед вашим l oop.

И тогда ваш код должен работать, а маркеры, отображаемые на карте

Обновить

Вы добавление маркера к строке, а не к объекту слоя. (Я не знаю, что делают **lyrName[i]**, но это не работает ...)

Попробуйте: 

var lyrName = ["cemeteries", "churches", "markers", "schools", "towns"];
var lyrObjs = [cemeteries, churches, markers, schools, towns];
var lyrType = ["cem", "chu", "mkr", "sch", "twn"];

//...

L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(lyrObjs[i]);
...