从 Db 构建多个工具提示

Question

我正在将我目前的地图脚本从 Google 转换为 Leaflet。我有一个包含 5 层的地图，每个层都有多个位置存储在 Db table 中。我在这个过程中有两个例程。第一个从 Db 收集数据并构建一个传递给第二个的 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);
}

脚本在 for 循环 (L.marker) 的最后一行生成 (Uncaught TypeError: t.addLayer is not a function)。

我认为错误是 loop/L.marker 在一个函数中。如果是这样，我应该传递什么以及如何传递使代码工作所需的内容。

TIA 寻求任何帮助

杰达威尔逊

Answer 1

您的图层 cemeteries 未定义。

你可以用var cemeteries= L.featureGroup().addTo(map)创建LayerGroup / FeatureGroup（相同但功能更多）。在循环之前添加此行。

然后您的代码应该可以工作并且标记会显示在地图上

更新

您正在将标记添加到字符串而不是图层对象。（我不知道 **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]);

Answer 2

我的不好... 墓地是自己定义的，我没有提供所有的功能。这是...

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[i] 更改为 cemeteries，图层将根据需要填充。

再次向 TIA 寻求帮助。杰达威尔逊

从 Db 构建多个工具提示

Building Multiple Tooltips From Db

binding

marker

leaflet