RangeError: Maximum call stack size exceeded - Google Maps Api

Question

我有一个应用程序可以在 google 地图上显示一组标记。它工作得很好，直到最近我注意到这个错误。令我困惑的是，我有一段时间没有触及显示标记的代码，而我现在才收到此错误。地图加载成功，但是当按下按钮以显示所有标记时，地图变为空白并且我收到调用堆栈错误。关于什么可能导致此错误突然出现的任何想法？我会粘贴相关代码。

angular.module('mapCtrl',['surfService'])
  .controller('mapController', function(Surf){
    var vm = this;
    var markers = [];
    var newMarker = null;
    var infoWindow = new google.maps.InfoWindow();

    // =============================
    // Get all Surf Session locations from Ajax Requst
    // =============================
    vm.displaySurfSessions  = function(){
      //If there are no markers in the array, then display the collection
      if(markers.length === 0){
        Surf.all()
          .success(function(dataResponse){
            //Loop through the database objects
            for (var i = 0; i < dataResponse.length; i++) {
              console.log(dataResponse[i]);
              //Set properties of objects into varibles for later use
              var title = dataResponse[i].title;
              var latitude = dataResponse[i].latitude;
              var longitude = dataResponse[i].longitude;
              var comment = dataResponse[i].comment;
              //Set the latitude and longitude
              var latLng = new google.maps.LatLng(latitude, longitude);

              //Set a new Marker for each location
              addMarker(latLng,title,comment);


            }//End for loop
            console.log('Markers',markers);
          });//End success
        }else {
          //Marker Must Be Removed
          vm.removeMarker = "Clear Map First!";
        }

    };

   // =============================
// Function to Set Markers on locations
// =============================
// Adds a marker to the map and push to the array.
function addMarker(location,title,comment) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: title,
    comment: comment
  });
  //Set the Lat & Lng of the new marker to use in saveSurfSession()
  newMarker = {latitude: marker.position.H , longitude: marker.position.L};
  map.panTo(location);
  console.log('NewMarker',newMarker);

  //Set the IW Content for each marker
  var infoWindowContent =
      "<h2 class='iw-title'>" + marker.title + "</h2>" +
      "<p class='iw-comment'> " + marker.comment + "</p>" ;

  //Create a new click event listerner for each marker
  google.maps.event.addListener(marker, 'click', function(){
    infoWindow.setContent(infoWindowContent);
    infoWindow.open(map,marker);
  });

  //Push the new marker into the markers array
  markers.push(marker);
}

// =============================================
// Map
// =============================================
  //Create options for the map
  var mapOptions = {
      center: new google.maps.LatLng(37.7831,-122.4039),
      styles: styles,
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  //Create a new google map
  map = new google.maps.Map(document.getElementById('map'),
  mapOptions);


  // This event listener will call addMarker() when the map is clicked.
    google.maps.event.addListener(map,'click', function(event) {
      // Allow for one marker to be placed at a time
        if(markers.length === 0){
          addMarker(event.latLng);
          console.log('Markers',markers);
        }else {
          // Tell User to Clear the Map
          alert('Clear Map');
        }
    });

  });//End mapController

Answer 1

发生此错误的原因很可能是您的输入数据 (dataResponse) 包含无效坐标（lat/lng 值）。

您可以利用以下函数来验证 lat/lng 值：

var isValidLat = function(val){
    return (isNumeric(val) && (val >= -90.0) && (val <= 90.0));
}

var isValidLng = function (val) {
    return (isNumeric(val) && (val >= -180.0) && (val <= 180.0));
}

var isNumeric = function (n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

然后你像这样验证你的输入数据：

for (var i = 0; i < dataResponse.length; i++) {
    var latitude = dataResponse[i].latitude;
    var longitude = dataResponse[i].longitude;
    if (isValidLat(latitude) && isValidLng(longitude)) {
         //...
    }          
}

另一个问题与以下行有关：

 newMarker = {latitude: marker.position.H , longitude: marker.position.L};

避免使用 google.maps.LatLng 对象的 non public 属性，而是更喜欢 .lat() 和 .lng() 函数来获取 lat/lng 值：

newMarker = {latitude: marker.position.lat() , longitude: marker.position.lng()};

RangeError: Maximum call stack size exceeded - Google Maps Api

RangeError: Maximum call stack size exceeded - Google Maps Api

javascript

callstack

google-maps

google-maps-api-3

angularjs