複数のマーカーを表示するようにマップを中央に設定する問題

Question

私はイオンフレームワークを使用しています。私はマップを作成し、複数のマーカーと値は、サーバside.allデータから来た適切に来たが、私はなって、これがエラー - なぜ私は知らない

ionic.bundle.js:25642 TypeError: Cannot read property 'fitBounds' of null 
    at autoCenter (app.js:147) 
    at app.js:135 
    at processQueue (ionic.bundle.js:27879) 
    at ionic.bundle.js:27895 
    at Scope.$eval (ionic.bundle.js:29158) 
    at Scope.$digest (ionic.bundle.js:28969) 
    at Scope.$apply (ionic.bundle.js:29263) 
    at done (ionic.bundle.js:23676) 
    at completeRequest (ionic.bundle.js:23848) 
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:23789) 

コード：イオン angular.module（「スターター」、[ ' 」、 『ngCordova』]）

.run(function ($ionicPlatform, GoogleMaps) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    GoogleMaps.init(); 
    }); 
}) 
.config(function ($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('map', { 
     url: '/', 
     templateUrl: 'templates/map.html', 
     controller: 'MapCtrl' 
    }); 

    $urlRouterProvider.otherwise("/"); 

}) 
.factory('Markers', function ($http) { 

    var markers = []; 

    return { 
     getMarkers: function() { 

      return $http.get("http://localhost:8080/LocationServices/markers.php").then(function (response) { 
       markers = response; 
       return markers; 
      }); 

     } 
    } 

}) 

.factory('GoogleMaps', function ($cordovaGeolocation, Markers) { 

    var apiKey = false; 
    var map = null; 
    var zoomVal = 15 

    function initMap() { 

     var options = { timeout: 10000, enableHighAccuracy: true }; 

     $cordovaGeolocation.getCurrentPosition(options).then(function (position) { 

      var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

      console.log("Latitude current: ", position.coords.latitude); 
      console.log("Longitude current: ", position.coords.longitude); 

      var mapOptions = { 
       center: latLng, 
       zoom: zoomVal, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map"), mapOptions); 

      //Wait until the map is loaded 
      google.maps.event.addListenerOnce(map, 'idle', function() { 

       var marker = new google.maps.Marker({ 
        map: map, 
        animation: google.maps.Animation.DROP, 
        position: latLng 
       }); 
       //Load the markers 
       loadMarkers(map); 
       //map.setCenter(new google.maps.LatLng(-37.92, 151.25)); 

      }); 

     }, function (error) { 
      console.log("Could not get location"); 

      //Load the markers 
      loadMarkers(map); 
      //map.setCenter(new google.maps.LatLng(-37.92, 151.25)); 
     }); 

    } 

    function loadMarkers(map) { 

     //Get all of the markers from our Markers factory 
     Markers.getMarkers().then(function (markers) { 

      console.log("Markers: ", markers); 
      var markersss = new Array(); 

      var records = markers.data.markers; 

      for (var i = 0; i < records.length; i++) { 

       var record = records[i]; 
       console.log("Latitude: ", record.lat); 
       console.log("Longitude: ", record.lng); 
       var markerPos = new google.maps.LatLng(record.lat, record.lng); 
       console.log("marker position", "" + markerPos); 

       // Add the markerto the map 
       var marker = new google.maps.Marker({ 
        map: map, 
        animation: google.maps.Animation.DROP, 
        position: markerPos 
       }); 

       markersss.push(marker); 

       var infoWindowContent = "<h4>" + record.name + "</h4>"; 

       addInfoWindow(marker, infoWindowContent, record); 

      } 
      autoCenter(map, markersss); 
     }); 
    } 
    function autoCenter(map1, markersss) { 
     //Create a new viewpoint bound 
     var bounds = new google.maps.LatLngBounds(); 
     //Go through each... 
     for (var i = 0; i < markersss.length; i++) { 
      bounds.extend(markersss[i].position); 
      console.log("bounds position", "" + markersss[i].position); 
     } 
     //Fit these bounds to the map 
     map1.fitBounds(bounds); 
     map1.setCenter(bounds.getCenter()); 
     //remove one zoom level to ensure no marker is on the edge. 
     map1.setZoom(vm.googleMap.getZoom() - 1); 

     // set a minimum zoom 
     // if you got only 1 marker or all markers are on the same address map will be zoomed too much. 
     if (map1.getZoom() > zoomVal) { 
      map1.setZoom(zoomVal); 
     } 
    } 
    function addInfoWindow(marker, message, record) { 

     var infoWindow = new google.maps.InfoWindow({ 
      content: message 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.open(map, marker); 
     }); 

    } 

    return { 
     init: function() { 
      initMap(); 
     } 
    } 

}) 

.controller('MapCtrl', function ($scope, $state, $cordovaGeolocation) { 

}); 

Answer 1

mapが（マップは、この場合にはnullある）

$cordovaGeolocation.getCurrentPositionが成功した場合にのみ作成され、それが成功していなかったときにもloadMarkersを呼び出します解決策：getCurrentPosition -callbacksの外にマップを作成します（centerのデフォルト値）。成功 - コールバックで

を作成し、マップ

function initMap() { 

    var options  = { timeout: 10000, enableHighAccuracy: true }, 
     mapOptions = { 
         center: new google.maps.LatLng(-37.92,151.25), 
         zoom: zoomVal, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
         }, 
     map = new google.maps.Map(document.getElementById("map"), mapOptions); 

    google.maps.event.addListenerOnce(map, 'idle', function() { 

     $cordovaGeolocation.getCurrentPosition(options).then(function (position) { 

     var center = new google.maps.LatLng(position.coords.latitude, 
               position.coords.longitude); 
     map.setCenter(center); 
     new google.maps.Marker({ 
       map  : map, 
       animation : google.maps.Animation.DROP, 
       position : center 
      }); 
     loadMarkers(map);   

     }, function (error) { 
     loadMarkers(map); 
     }); 

    }); 
}