如何向传单层添加功能?

时间:2017-08-21 10:49:08

标签: javascript php json google-maps leaflet

https://jsfiddle.net/324h2d9q/87/你好!这是我的宣传单地图。我想在我的图层中添加一个动作。例如,如果我检查,Scoli“选项卡,应该运行addScoli1()函数,但我不知道怎么做...另外,对于标签,Muzee”我想添加addMuzeu1()功能等等。我可以这样做吗?谢谢!

 <script type="text/javascript">
    $(document).ready(function() {
        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']);
   var scoala = JSON.parse( '<?php echo json_encode($scoala) ?>' );
   }
  }
   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']);   
   }
   var zona = JSON.parse( '<?php echo json_encode($zona) ?>' );
  }

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']);
   }
   var muzeu = JSON.parse( '<?php echo json_encode($muzeu) ?>' );
  }
var markersA = [];
var markersB = [];
var markersC = [];
var groupA = L.layerGroup(addScoala1);
var groupB = L.layerGroup(addMuzeu1);
var groupC = L.layerGroup(addZona1);
//background tile set
var tileLayer = {'Harta' : L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoicm9iaTEwMTAxMjk4IiwiYSI6ImNqNjZocndibTE2NmQzM3F4YWRzMDBubWkifQ.ccMsQCNcMHOG4ucR6ogCcg', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org/"> OpenStreetMap </a> contributors, ' +
    '<a href="http://creativecommons.org/"> CC-BY-SA </a>, ' +
    'Imagery © <a href="http://mapbox.com"> Mapbox </a>',
            key: 'BC9A493B41014CAABB98F0471D759707'
        })
};

var map = L.map('map', {
    center: new L.LatLng(44.9323281,26.0306833),
    zoom: 12.25,
    layers: [tileLayer['Harta'], groupA, groupB, groupC] //change this to determine which ones start loaded on screen
});


//Control on the Top Left that handles the switching between A and B
var overlayMaps = {
    "Scoli": groupA,
    "Muzee": groupB,
    "Parcuri": groupC
};
L.control.layers(tileLayer, overlayMaps, {position:'topleft'}).addTo(map);
        $("#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>

0 个答案:

没有答案