离子不在第一次装载时呈现谷歌地图 [英] ionic not rendering google maps on first load

问题描述

我有一个应用程序，它是一个欢迎/登录屏幕，在您签名后，您会被带到一个带有四个选项卡的选项卡屏幕，其中第一个选项卡显示Google地图。

第一次登录时，页面不会自行显示，但在刷新页面后，地图显示会优雅地按照预期的第一次进行。这发生在每一次，但我只得到一个JavaScript错误。

错误

 未捕获错误：无法在同一帧中加载XRegExp两次（匿名函数）@ xregexp-min.js：2 
  

$ h

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' 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）;
$ b $ scope.centerOnMe = function（）{
if（！$ scope.map）{
return;


$ scope.loading = $ ionicLoading.show（{
content：'获取当前位置...'，
showBackdrop：false
}）;

//获取用户位置
$ cordovaGeolocation
.getCurrentPosition（{
timeout：10000，
enableHighAccuracy：true
}）
.then（function（position）{
$ ionicLoading.hide（）;
//我们找到了位置
$ scope.map.setCenter（
new google.maps .LatLng（
position.coords.latitude，
position.coords.longitude
）
）;
}，函数（e）{
$ ionicLoading .hide（）;
console.log（e）;
alert（呃，我们找不到您的位置！您的GPS是否启用？\\\
\\\
+ e）;
}）;
};

编辑

这是我最新的javascript错误，用离子初始化代替google init后。我明白发生了什么，但我不知道应该在哪里移动该函数声明。我把它移到init里面，但它仍然不起作用。我应该设置超时吗？

  TypeError：$ scope.loadLocations在初始化时不是函数
（controllers.js ：179）
在Object.ionic.Platform.ready（ionic.bundle.js：2120）
在新< anonymous> （controllers.js：182）
 at invoke（ionic.bundle.js：12468）
在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）
  

解决方案

您不需要 $ scope。 centerOnMe（）; 初始化。如果你这样做，那么编译是不一致的;参考这些例子，你就会明白。

此外，在某些情况下离子不适用于DOM。

在容器内使用 $ scope.init 载入映射，而不是函数initialize（） 。

此答案详细解释它。

另一种方法是替换 google.maps.event.addDomListener（window，'load'，initialize）; with ionic.Platform.ready（initialize）; 。 此处。

I have an app that is a welcome/sign in screen and after you sign it you are taken to a tab screen with four tabs in it, the first tab of which shows a google map.

Upon first sign in the page does not display it's self but upon refresh of the page the map show's up gracefully as it was expected to do the first time. This happens EVERY time but I only get one javascript error.

error

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

code

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);
  });
};

edit

This is my latest javascript error, after replacing the google init with the ionic init. I understand what's happening but I don't know where I should move that function declaration to. I moved it inside the init but it still didn't work. Should I set a timeout?

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)

解决方案

You don't need $scope.centerOnMe(); in initialize. If you do then compilation is inconsistent; refer to the examples and you will understand.

Also, ionic doesn't work well with DOM in certain cases.

Load map with $scope.init inside the container instead of function initialize().

This answer explains it in detail.

Another way to do it is by replacing google.maps.event.addDomListener(window, 'load', initialize); with ionic.Platform.ready(initialize);. Example here.

这篇关于离子不在第一次装载时呈现谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！