javascript „zu viel Rekursion“ Fehler ist aufgetreten, wenn ich googleApi in Teilansicht

Question

javascript „zu viel Rekursion“ verwendet Fehler ist aufgetreten, wenn ich googleApi in Teilansicht verwendet

was ist die Lösung?

in Teilansicht:

<script type="text/javascript"> 
 
    var poly; 
 
    var geodesicPoly; 
 
    var marker1; 
 
    var marker2; 
 
    var locations; 
 
    var map; 
 
    var flag = 0; 
 
    var geodesicPoly = null; 
 
    $(document).ready(function() { 
 
     
 
     function initialize() { 
 
      var middleest = new google.maps.LatLng(32.2717923, 53.7049971); 
 
      var mapOptions = { 
 
       zoom: 5, 
 
       center: middleest, 
 
       minZoom: 15, maxZoom: 5 
 
      }; 
 
      var map = new google.maps.Map(document.getElementById('flying_network'), mapOptions); 
 
      map.setCenter(middleest); 
 
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('info')); 
 
      $.ajax({ 
 
       type: "POST", 
 
       url: "/Route/FlightCording", 
 
       data: {}, 
 
       contentType: "application/json; charset=utf-8", 
 
       dataType: "json", 
 
       success: function (data) { 
 
        setMarkers(map, data); 
 
       }, 
 
       error: function (x, e) { 
 
        alert("The call to the server side failed. " + x.responseText); 
 
       } 
 
      }); 
 
     } 
 

 
     google.maps.event.addDomListener(window, 'load', initialize); 
 
     function setMarkers(map, locations) { 
 
      // Add markers to the map 
 
      var shape = { 
 
       coord: [1, 1, 1, 20, 18, 20, 18, 1], 
 
       type: 'poly' 
 
      }; 
 

 
      for (var i = 0; i < locations.length; i++) { 
 
       var airport = locations[i]; 
 
       var myLatLng = new google.maps.LatLng(airport.LatitudeDeg, airport.LongitudeDeg); 
 
       var marker = new google.maps.Marker({ 
 
        position: myLatLng, 
 
        map: map, 
 
        shape: shape, 
 
        animation: google.maps.Animation.DROP, 
 
        title: airport.AirportTitle, 
 
        zIndex: 1 
 
       }); 
 
       var infowindow = new google.maps.InfoWindow(); 
 
       google.maps.event.addListener(marker, 'click', (function (marker, airport, infowindow) { 
 
        return function() { 
 
         //var notif; 
 
         showRoutes(airport.AirportIataCode).done(function (result) { 
 
          //رفتن به موقعیت مکانی مارکر 
 
          map.setCenter(marker.getPosition()); 
 
          //نمایش اطلاعات 
 
         }); 
 
        }; 
 
       })(marker, airport, infowindow)); 
 
       //google.maps.event.clearListeners(marker, 'click'); 
 
      } 
 
     } 
 
     function showRoutes(iatacode) { 
 
      return $.ajax({ 
 
       type: "POST", 
 
       url: "/Route/RouteLines", 
 
       data: "{sourceIataCode:'" + iatacode + "'}", 
 
       contentType: "application/json; charset=utf-8", 
 
       dataType: "json", 
 
       success: function (data) { 
 
        for (var i = 0; i < data.length; i++) { 
 
         geodesicPoly = new google.maps.Polyline({ 
 
          strokeColor: '#CC0099', 
 
          strokeOpacity: 1.0, 
 
          strokeWeight: 3, 
 
          geodesic: true, 
 
          map: map 
 
         }); 
 

 
         var marker1 = new google.maps.Marker({ 
 
          map: map, 
 
          draggable: false, 
 
          position: { lat: data[i].sourceLat, lng: data[i].sourceLong } 
 
         }); 
 

 
         var marker2 = new google.maps.Marker({ 
 
          map: map, 
 
          draggable: false, 
 
          position: { lat: data[i].destinationLat, lng: data[i].destinationLong } 
 
         }); 
 

 
         var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(data[i].sourceLat, data[i].sourceLong), new google.maps.LatLng(data[i].destinationLat, data[i].destinationLong)); 
 
         map.fitBounds(bounds); 
 

 
         // drawing line 
 
         var path = [new google.maps.LatLng(data[i].sourceLat, data[i].sourceLong), new google.maps.LatLng(data[i].destinationLat, data[i].destinationLong)]; 
 

 
         geodesicPoly.setPath(path); 
 

 
         // create marker event 
 
         var destIataCode = data[i].destinationIataCode; 
 
         google.maps.event.addListener(marker2, 'click', (function (marker2, destIataCode) { 
 
          return function() { 
 
           showRoutes(destIataCode).done(function (result) { 
 
            map.setCenter(marker.getPosition()); 
 
           }); 
 
          }; 
 
         })(marker2, destIataCode)); 
 
        } 
 

 
       }, 
 
       error: function (x, e) { 
 
        alert("Error"); 
 
       } 
 
      }); 
 
     } 
 
     function addLine() { 
 
      geodesicPoly.setMap(map); 
 
     } 
 
     function removeLine() { 
 
      geodesicPoly.setMap(null); 
 
     } 
 
     
 
    }); 
 
    
 
    
 
</script> 
 

 
<div id="flying_network" class="col-md-5 col-sm-5 col-xs-12"></div>

javascript "zu viel Rekursion" Fehler ist aufgetreten, wenn ich googleApi in Teilansicht verwendet

, was die Lösung ist ?

Answer 1

Sie haben Ihre maxZoom und minZoom Eigenschaften in der MapOptions Objekt umgekehrt. Das sollte sein:

var mapOptions = { 
    zoom: 5, 
    center: middleest, 
    minZoom: 5, 
    maxZoom: 15 
}; 

proof of concept fiddle

Code-Schnipsel:

var poly; 
 
var geodesicPoly; 
 
var marker1; 
 
var marker2; 
 
var locations; 
 
var map; 
 
var flag = 0; 
 
var geodesicPoly = null; 
 
$(document).ready(function() { 
 

 
    function initialize() { 
 
    var middleest = new google.maps.LatLng(32.2717923, 53.7049971); 
 
    var mapOptions = { 
 
     zoom: 5, 
 
     center: middleest, 
 
     minZoom: 5, 
 
     maxZoom: 15 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('flying_network'), mapOptions); 
 
    map.setCenter(middleest); 
 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('info')); 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: "/Route/FlightCording", 
 
     data: {}, 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     success: function(data) { 
 
     setMarkers(map, data); 
 
     }, 
 
     error: function(x, e) { 
 
     alert("The call to the server side failed. " + x.responseText); 
 
     } 
 
    }); 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 

 
    function setMarkers(map, locations) { 
 
    // Add markers to the map 
 
    var shape = { 
 
     coord: [1, 1, 1, 20, 18, 20, 18, 1], 
 
     type: 'poly' 
 
    }; 
 

 
    for (var i = 0; i < locations.length; i++) { 
 
     var airport = locations[i]; 
 
     var myLatLng = new google.maps.LatLng(airport.LatitudeDeg, airport.LongitudeDeg); 
 
     var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     shape: shape, 
 
     animation: google.maps.Animation.DROP, 
 
     title: airport.AirportTitle, 
 
     zIndex: 1 
 
     }); 
 
     var infowindow = new google.maps.InfoWindow(); 
 
     google.maps.event.addListener(marker, 'click', (function(marker, airport, infowindow) { 
 
     return function() { 
 
      //var notif; 
 
      showRoutes(airport.AirportIataCode).done(function(result) { 
 
      //رفتن به موقعیت مکانی مارکر 
 
      map.setCenter(marker.getPosition()); 
 
      //نمایش اطلاعات 
 
      }); 
 
     }; 
 
     })(marker, airport, infowindow)); 
 
     //google.maps.event.clearListeners(marker, 'click'); 
 
    } 
 
    } 
 

 
    function showRoutes(iatacode) { 
 
    return $.ajax({ 
 
     type: "POST", 
 
     url: "/Route/RouteLines", 
 
     data: "{sourceIataCode:'" + iatacode + "'}", 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     success: function(data) { 
 
     for (var i = 0; i < data.length; i++) { 
 
      geodesicPoly = new google.maps.Polyline({ 
 
      strokeColor: '#CC0099', 
 
      strokeOpacity: 1.0, 
 
      strokeWeight: 3, 
 
      geodesic: true, 
 
      map: map 
 
      }); 
 

 
      var marker1 = new google.maps.Marker({ 
 
      map: map, 
 
      draggable: false, 
 
      position: { 
 
       lat: data[i].sourceLat, 
 
       lng: data[i].sourceLong 
 
      } 
 
      }); 
 

 
      var marker2 = new google.maps.Marker({ 
 
      map: map, 
 
      draggable: false, 
 
      position: { 
 
       lat: data[i].destinationLat, 
 
       lng: data[i].destinationLong 
 
      } 
 
      }); 
 

 
      var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(data[i].sourceLat, data[i].sourceLong), new google.maps.LatLng(data[i].destinationLat, data[i].destinationLong)); 
 
      map.fitBounds(bounds); 
 

 
      // drawing line 
 
      var path = [new google.maps.LatLng(data[i].sourceLat, data[i].sourceLong), new google.maps.LatLng(data[i].destinationLat, data[i].destinationLong)]; 
 

 
      geodesicPoly.setPath(path); 
 

 
      // create marker event 
 
      var destIataCode = data[i].destinationIataCode; 
 
      google.maps.event.addListener(marker2, 'click', (function(marker2, destIataCode) { 
 
      return function() { 
 
       showRoutes(destIataCode).done(function(result) { 
 
       map.setCenter(marker.getPosition()); 
 
       }); 
 
      }; 
 
      })(marker2, destIataCode)); 
 
     } 
 

 
     }, 
 
     error: function(x, e) { 
 
     alert("Error"); 
 
     } 
 
    }); 
 
    } 
 

 
    function addLine() { 
 
    geodesicPoly.setMap(map); 
 
    } 
 

 
    function removeLine() { 
 
    geodesicPoly.setMap(null); 
 
    } 
 

 
});

html, 
 
body, 
 
#flying_network { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="flying_network" class="col-md-5 col-sm-5 col-xs-12"></div>