Question

我有一个传单映射和一些函数，我从JSON解析数据。

当我从图层按钮单击“Parcuri”按钮时，我想使用addScoala1（）函数显示数据。我怎么能这样做？

我也是Leaflet编程的菜鸟。谢谢！还有JSFiddle：

    $(document).ready(function() {
          var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl),
            map = new L.Map('map', { center: new L.LatLng(44.9323281,26.0306833), zoom: 13 }),
            drawnItems = L.featureGroup().addTo(map);
    L.control.layers({
        'Scoli': osm.addTo(map),
        'Muzee': osm.addTo(map),
        'Parcuri': osm.addTo(map)
    },).addTo(map);
  var scoala = JSON.parse( '<?php echo json_encode($scoala) ?>' );
  scoala1= JSON.stringify(scoala);
  var muzeu = JSON.parse( '<?php echo json_encode($muzeu) ?>' );
  muzeu1= JSON.stringify(muzeu);
  var zona = JSON.parse( '<?php echo json_encode($zona) ?>' );
  zona1= JSON.stringify(zona);
    function addScoala1() {
   for(var i=0; i<scoala.length; i++) {
    var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
    var marker = L.marker( [scoala[i]['latitudine'], scoala[i]['longitudine']], {icon: greenIcon}).addTo(map);
    marker.bindPopup( "<b>" + scoala[i]['scoala']+"</b><br>Detalii:" + scoala[i]['detalii'] + "<br />Telefon: " + scoala[i]['telefon']);
   }
  }
   function stringToGeoPoints( geo ) {
   var linesPin = geo.split(",");

   var linesLat = new Array();
   var linesLng = new Array();

   for(i=0; i < linesPin.length; i++) {
    if(i % 2) {
     linesLat.push(linesPin[i]);
    }else{
     linesLng.push(linesPin[i]);
    }
   }

   var latLngLine = new Array();

   for(i=0; i<linesLng.length;i++) {
    latLngLine.push( L.latLng( linesLat[i], linesLng[i]));
   }

   return latLngLine;
  }

  function addZona1() {
   for(var i=0; i < zona.length; i++) {
       //console.log(zona[i]['geolocatii']);
    var polygon = L.polygon( stringToGeoPoints(zona[i]['geolocatii']), { color: 'red'}).addTo(map);
    polygon.bindPopup( "<b>" + zona[i]['nume']);   
   }
  }

function addMuzeu1() {
   for(var i=0; i<muzeu.length; i++) {
    var marker = L.marker( [muzeu[i]['latitudine'], muzeu[i]['longitudine']]).addTo(map);
    marker.bindPopup( "<b>" + muzeu[i]['muzeu']+"</b><br>Detalii:" + muzeu[i]['detalii'] + "<br />Telefon: " + muzeu[i]['telefon']);
   }
  }
        $("#login").bootstrapValidator({
            framework: "bootstrap",
            icon: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                "email": {
                    validators: {
                        notEmpty: {
                            message: "Required field"
                        }
                    }
                },
                "user_password": {
                    validators: {
                        notEmpty: {
                            message: "Required field"
                        }
                    }
                }
            }
        });

        $("#am-uitat-parola").bootstrapValidator({
            framework: "bootstrap",
            icon: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                "user_recover_email": {
                    validators: {
                        notEmpty: {
                            message: "Required field"
                        },
                        emailAddress: {
                            message: "E-mail address invalid"
                        }
                    }
                }
            }
        });

        $("#link-forgot").click(function(){
            $("#am-uitat-parola").toggle();
        });


    });

</script>

Answer 1

使用图层组和图层控件代替您的方法。

http://leafletjs.com/examples/layers-control/

这样的事情应该有效：

// Create a layer group where you can add all your markers
var layerGroup = new L.LayerGroup();

for(var i=0; i<scoala.length; i++) {
    var greenIcon = new L.Icon({
        iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    // Create your marker and bind a popup and then add to layerGroup
    var marker = L.marker( [scoala[i]['latitudine'], scoala[i]['longitudine']], {
        icon: greenIcon
    }).bindPopup( "<b>" + scoala[i]['scoala']+"</b><br>Detalii:" + scoala[i]['detalii'] + "<br />Telefon: " + scoala[i]['telefon']).addTo(layerGroup);
}

// It's this function which will add the control to your map
L.control.layers(layerGroup).addTo(map);

如何在Leaflet图层上添加函数作为操作？

1 个答案: