Javascript ошибка «слишком много рекурсии» произошла, когда я использовал GoogleAPI в частичном

Question

JavaScript «слишком много рекурсии» ошибки, когда я использовал GoogleAPI в частичном

что такое решение?

в частичном:

<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 "слишком много рекурсии" ошибка, когда я использовал GoogleAPI в частичном

что решение ?

Answer 1

У вас есть свои maxZoom и minZoom объектов в объекте MapOptions. Должно быть:

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

proof of concept fiddle

фрагмент кода:

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>