Cześć wszystkim, chciałbym się zapytać o rade co można zrobić w skrypcie javascript poniżej korzystającego z Google Map API, żeby był bardziej czytelny i wydajniejszy:)
class Geolocations { constructor(radius_circle) { this.radius_circle = radius_circle; } init(options) { if(!options.location) return; try {google.maps.event.addDomListener(window, "load", this.makeMap.bind(this)); } catch(e) { return; } try {google.maps.event.addDomListener(window, "load", this.Listener.bind(this)); } catch(e) { return; } this.options = options; this.location = this.options.location; } makeMap() { this.GetAllLocationsOnMap(); var elements=0; this.elements=elements; var TableTypeSelectedIcon=[]; this.TableTypeSelectedIcon=TableTypeSelectedIcon; var TableIfIconSelect=[]; this.TableIfIconSelect=TableIfIconSelect; var geokoder = new google.maps.Geocoder(); this.geokoder=geokoder; var loc = this.location.split(","), pos = new google.maps.LatLng(loc[0], loc[1]); var mapOptions =new google.maps.Map(document.querySelector("#map"), { zoom: 13, center: pos, disableDefaultUI: false, scaleControl: true, zoomControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl:false, mapTypeControl: true, mapTypeControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT } }); this.mapOptions=mapOptions; var Map = new google.maps.Map(document.getElementById("map"), mapOptions); this.Map=Map; } GetAllLocationsOnMap(val) { var lan="http://localhost:3000/api/connectAll/"; this.SendRequestToDatabase(lan); } Listener(){ var markers_on_map = []; this.markers_on_map=markers_on_map; var Circle=()=>this.circle; var CallbackToThisDragListener=()=>this.DragListener(); google.maps.event.addListener(this.Map,'dragstart',function(zdarzenie) { Circle().setMap(null); }); google.maps.event.addListener(this.Map,'dragend',function(zdarzenie) { for (var i = 0; i < markers_on_map.length; i++) { if (markers_on_map[i]) { markers_on_map[i].setMap(null); markers_on_map[i] = null; } } CallbackToThisDragListener(); }); } DragListener() { this.CheckAddressValue(); } CheckAddressValue() { var CallbackToThisCreateCircle=()=>this.CreateCircle(); var CallbackToThisAll_locations=this.BringDataFromDatabase.locations; var CallbackUpdateMarker=(All_locations,iteration)=>this.SaveGlobalLocationsValueInClass(All_locations,iteration); if(this.address==null) { this.address=''; } if (this.geokoder) { this.geokoder.geocode({'address': this.address}, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { CallbackToThisCreateCircle(); for (var iteration = 0; iteration < CallbackToThisAll_locations.length; iteration++) { CallbackUpdateMarker(CallbackToThisAll_locations[iteration],iteration); } } } }); } } CreateCircle() { var mylat=this.Map.getCenter().lat(); this.mylat=mylat; var mylng=this.Map.getCenter().lng(); this.mylng=mylng; var circle; circle = new google.maps.Circle({ map: this.Map, position: new google.maps.LatLng(mylat, mylng), radius: this.radius_circle, strokeColor: '#b2dae8', strokeOpacity: 0.8, strokeWeight: 2, clickable: false, fillColor: '#b2dae8', fillOpacity: 0.35 }); this.circle=circle; circle.bindTo('center', circle, 'position'); } SaveGlobalLocationsValueInClass(LocationsOnMap,iteration) { this.LocationsOnMap=LocationsOnMap; this.iteration=iteration; this.SetMarkerLocation(iteration) } SetMarkerLocation() { var DymekLocations=this.LocationsOnMap; var Mapka=()=>this.Map; var InfoWindow = new google.maps.InfoWindow(); var wartosc=this.ComputeDistance(); var marker_lat_lng=wartosc[0]; var distance_from_location=wartosc[1]; if (distance_from_location <= this.radius_circle) { var new_marker=this.CreatNewMarker(marker_lat_lng); this.new_marker=new_marker; this.FiltersMarkers(); google.maps.event.addListener(new_marker, 'mouseover', function () { InfoWindow = new google.maps.InfoWindow({ content: '<div style="color:black"><strong>'+DymekLocations.name+'</strong><br>'+DymekLocations.street+'<br>'+DymekLocations.phone+'</div>', size: new google.maps.Size(150,50), pixelOffset: new google.maps.Size(0, -30), position: marker_lat_lng, map: Mapka() }); google.maps.event.addListener(new_marker, 'mouseout', function () { if(InfoWindow){ InfoWindow.setMap(null); InfoWindow = null; } }); }); this.markers_on_map.push(new_marker); } } ComputeDistance() { var marker_lat_lng = new google.maps.LatLng(this.LocationsOnMap.lat, this.LocationsOnMap.lng); var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(this.mylat, this.mylng), marker_lat_lng); return [marker_lat_lng, distance_from_location]; } CreatNewMarker(marker_lat_lng) { var new_marker = new google.maps.Marker({ position: marker_lat_lng, map: this.Map, title: location.name }); return new_marker; } FiltersMarkers() { if(this.BringDataFromDatabase.locations[this.iteration].type.indexOf(this.address) != -1 || this.BringDataFromDatabase.locations[this.iteration].name.indexOf(this.address) != -1 ||this.BringDataFromDatabase.locations[this.iteration].name==this.address || this.BringDataFromDatabase.locations[this.iteration].type==this.address) { this.new_marker.setVisible(true); } else { this.new_marker.setVisible(false); } this.FiltersMarkersOnTypeSelectedIcon(); } FiltersMarkersOnTypeSelectedIcon() { for(var x=0;x<this.TableTypeSelectedIcon.length;x++) { if(this.TableIfIconSelect[x]==true && this.BringDataFromDatabase.locations[this.iteration].type==this.TableTypeSelectedIcon[x]) { this.new_marker.setVisible(false); } } } UpdateCircleRadius(rad) { this.radius_circle=rad; this.circle.radius=rad; this.circle.bindTo('center', this.circle, 'position'); this.UpdateNumbersOfMarkers(); } UpdateNumbersOfMarkers() { var All_locations=this.BringDataFromDatabase.locations; var CallbackUpdateMarker=(All_locations,iteration)=>this.SaveGlobalLocationsValueInClass(All_locations,iteration); this.CleanMarkersOnMap(); for (var iteration = 0; iteration < All_locations.length; iteration++) { CallbackUpdateMarker(All_locations[iteration],iteration); } } UncheckedLocation(TypeSelectedIcon,IfIconSelect) { if(this.TableTypeSelectedIcon.indexOf(TypeSelectedIcon)>-1) { var TheSameElementInArray=this.TableTypeSelectedIcon.indexOf(TypeSelectedIcon); this.TableIfIconSelect[TheSameElementInArray]=IfIconSelect; } else { this.TableTypeSelectedIcon[this.elements]=TypeSelectedIcon; this.TableIfIconSelect[this.elements]=IfIconSelect; this.elements=this.elements+1; } this.UpdateNumbersOfMarkers(); } UpdateAddressValue(val) { this.circle.setMap(null); this.CleanMarkersOnMap(); this.address=val; this.CheckAddressValue(); } CleanMarkersOnMap(){ for (var i = 0; i < this.markers_on_map.length; i++) { if (this.markers_on_map[i]) { this.markers_on_map[i].setMap(null); this.markers_on_map[i] = null; } } } SendRequestToDatabase(lan) { var SaveLocationsFromDatabaseArrowFunction=(BringDataFromDatabase)=>this.BringDataFromDatabase=BringDataFromDatabase; var xhr = new XMLHttpRequest(); xhr.open("POST",lan); xhr.onreadystatechange = function(e) { if (this.readyState === 4 && this.status === 200) { var res=xhr.responseText; var BringDataFromDatabase=JSON.parse(res); SaveLocationsFromDatabaseArrowFunction(BringDataFromDatabase); } }; xhr.send(null); } } var geo=new Geolocations(3000); geo.init({ location: "51.269262, 22.548271", }); function sliderChange(val) { var kolo=val*100; geo.UpdateCircleRadius(kolo); } function IconClick(TypeSelectedIcon,IfIconSelect) { geo.UncheckedLocation(TypeSelectedIcon,IfIconSelect); } var clearSearch; var WaitForDataFromDatabase; function InputSearchValue(val){ clearTimeout(clearSearch); clearTimeout(WaitForDataFromDatabase); WaitForDataFromDatabase=setTimeout(()=>{ var lan="http://localhost:3000/api/connect/"+val; geo.SendRequestToDatabase(lan); },500); clearSearch=setTimeout(()=>{ geo.UpdateAddressValue(val); },600); }