首次加载时 ionic 不渲染 google 地图

Question

我有一个在屏幕上显示 welcome/sign 的应用程序，在您签名后，您将被带到一个包含四个选项卡的选项卡屏幕，第一个选项卡显示 google 地图.

首次登录时，页面不显示其自身，但刷新页面后，地图会像第一次预期的那样优雅地显示。这种情况每次都会发生，但我只收到一个 javascript 错误。

错误

Uncaught Error: can't load XRegExp twice in the same frame(anonymous function) @ xregexp-min.js:2

代码

function initialize() {
  var mapOptions = {
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(
    document.getElementById("map"),
    mapOptions
  );
  var geocoder = new google.maps.Geocoder();

  $scope.map = map;
  $scope.centerOnMe();
}
google.maps.event.addDomListener(window, 'load', initialize);

$scope.centerOnMe = function() {
  if(!$scope.map) {
    return;
  }

  $scope.loading = $ionicLoading.show({
    content: 'Getting current location...',
    showBackdrop: false
  });

  // get user location
  $cordovaGeolocation
  .getCurrentPosition({
    timeout:10000,
    enableHighAccuracy:true
  })
  .then(function(position) {
    $ionicLoading.hide();
    // we found the position
    $scope.map.setCenter(
      new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude
      )
    );
  }, function(e) {
    $ionicLoading.hide();
    console.log(e);
    alert("Uh oh, we can't find your position! Is your GPS enabled?\n\n" + e);
  });
};

编辑

这是我最近的 javascript 错误，在将 google init 替换为 ionic init 之后。我明白发生了什么，但我不知道应该将函数声明移到哪里。我将它移到 init 中，但它仍然不起作用。我应该设置超时吗？

TypeError: $scope.loadLocations is not a function
    at initialize (controllers.js:179)
    at Object.ionic.Platform.ready (ionic.bundle.js:2120)
    at new <anonymous> (controllers.js:182)
    at invoke (ionic.bundle.js:12468)
    at Object.instantiate (ionic.bundle.js:12476)
    at ionic.bundle.js:16745
    at IonicModule.controller.self.appendViewElement (ionic.bundle.js:47716)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (ionic.bundle.js:45973)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (ionic.bundle.js:45893)
    at IonicModule.controller.self.render (ionic.bundle.js:47590)

Answer 1

您不需要 $scope.centerOnMe(); 进行初始化。如果这样做，则编译不一致；参考例子，你就会明白。

另外，ionic 在某些情况下不能很好地与 DOM 一起使用。

加载容器内带有 $scope.init 的地图，而不是 function initialize()。

This 答案解释得很详细。

另一种方法是将 google.maps.event.addDomListener(window, 'load', initialize); 替换为 ionic.Platform.ready(initialize);。示例 here.

首次加载时 ionic 不渲染 google 地图

ionic not rendering google maps on first load

google-maps

ionic-framework

cordova-plugins

ngcordova

错误

代码

编辑