Google 地图居中加载失败

Question

嗯，我遇到了这个问题，加载一次地图，一切正常。第二次或更新一次地图加载不正常，但在导航时加载不居中，您可以看到已制作但变形或完全丢失的标记。

我已经尝试了几种方法来解决这个问题，我发现第一个也是最常见的方法是使用 google.maps.event.trigger(map 'resize') 但它当时不起作用和逻辑，尝试在执行加载地图时创建一个新地图，具有相同的数据和重点，但都不适合我。这可能也是我使用地图的方式。我在我的应用程序中使用相机插件，用户拍照，这应该检测我在哪里绘制图片并显示地图。每次打开视图时，相机的插头，在拍摄和显示图片的过程中，我都会调用适当的函数来加载地图，这让我有点棘手，立即加载我有一个很好的时间锁定在这个问题，我发现解决方案对我有用，但仅适用于浏览器，设备无法正常工作。我正在使用离子框架和插件 cordova。

控制器：

.controller("CamaraCtrl", function($scope,$rootScope, Camera,$cordovaGeolocation,$state,$location,$ionicSideMenuDelegate) { 
  var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
  .getCurrentPosition(posOptions)
  .then(function (position) {
    var latitud_actual  = position.coords.latitude
    var longitud_actual = position.coords.longitude
    $scope.latitud = latitud_actual;
    $scope.longitud = longitud_actual;
          //$scope.map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
  }, function(err) {
    // error
  });

  function initialize() {
var mapOptions = {
  center: new google.maps.LatLng($scope.latitud, $scope.longitud),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);
$scope.setMarker(map, new google.maps.LatLng($scope.latitud, $scope.longitud), 'Yo', '');
$scope.map = map;
}
$scope.setMarker = function(map, position, title, content) {
  var marker;
  var markerOptions = {
      position: position,
      map: map,
      title: title
  };

  marker = new google.maps.Marker(markerOptions);

  google.maps.event.addListener(marker, 'click', function () {
      // close window if not undefined
      if (infoWindow !== void 0) {
          infoWindow.close();
      }
      // create new window
      var infoWindowOptions = {
          content: content
      };
      infoWindow = new google.maps.InfoWindow(infoWindowOptions);
      infoWindow.open(map, marker);
  });
 }
 $scope.mostrar_form = false;
 $scope.mostrar_boton_view = false;
 $scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
  console.log(imageURI);
  $scope.lastPhoto = imageURI;
  $scope.mostrar_form = true;
  $scope.mostrar_boton_view = false;
  google.maps.event.addDomListener(window, 'load', initialize);  
  initialize();
}, function() {
  $scope.mostrar_boton_view = true;
}, {
  quality: 75,
  targetWidth: 320,
  targetHeight: 320,
  saveToPhotoAlbum: false
  });
 };
  $scope.getPhoto();
})

Answer 1

我找到的唯一解决方案是创建一个再次执行地图的函数。它不应该是最佳的，但至少它解决了我的问题。

$scope.centrar =  function(){
  var mapOptions = {
    center: new google.maps.LatLng($scope.latitud, $scope.longitud),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false
   };
   var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);
   $scope.setMarker(map, new google.maps.LatLng($scope.latitud, $scope.longitud), 'Yo', '');
   $scope.map = map;
}

Google 地图居中加载失败

Google maps centered load failure

google-maps

ionic-framework

cordova-plugins