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 © <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>