Ionic Android 应用程序在滚动到 google 地图时崩溃

Question

我有一个非常简单的带有 ionic 卡片的页面，下面是我有 google 个地图的卡片：

<ui-gmap-google-map center='map.center' zoom='map.zoom' dragging='false' options="map.options" scroll="false"></ui-gmap-google-map>

在我的 style.css 中，我的地图配置大小如下：

.angular-google-map-container { height: 400px; }

在我的控制器中，我有以下代码来启动地图：

 uiGmapGoogleMapApi.then(function(maps) {
    $scope.map = { center: { latitude: $scope.lat,longitude: $scope.lng },
      zoom:15,
      options: {
        zoomControl: true,
        maxZoom:15,
        minZoom:10,
        draggable: false,
        rotateControl: false,
        scrollwheel: false,
        streetViewControl: false,
        disableDefaultUI: true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      }
    };
  });

在 IOS 上一切正常。 chrome 浏览器也是如此。但是当我运行 android 上的应用程序时，它 "unfortunately stops" 不时。特别是如果我在页面上的所有数据加载之前快速滚动。

不确定这种行为如何稳定 google maps+ ionic 性能问题。

任何解决此问题的帮助都会很棒。

在 adb logcat 中我发现了以下内容：

F/libc    (13733): Fatal signal 11 (SIGSEGV) at 0x00000005 (code=1), thread 13772 (myApp323408)
I/DEBUG   (  178): pid: 13733, tid: 13772, name: myApp323408  >>> com.ionicframework.myApp323408 <<<
W/ActivityManager(  529):   Force finishing activity com.ionicframework.myApp323408/.MainActivity
W/InputDispatcher(  529): channel '22441548 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity (server)' ~ Consumer closed input channel or an error occurred.  events=0xd
E/InputDispatcher(  529): channel '22441548 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
I/ActivityManager(  529): Process com.ionicframework.myApp323408 (pid 13733) has died.
W/InputDispatcher(  529): Attempted to unregister already unregistered input channel '22441548 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity (server)'
I/WindowState(  529): WIN DEATH: Window{22441548 u0 id=0 com.ionicframework.myApp323408/com.ionicframework.myApp323408.MainActivity}
I/ActivityManager(  529): [TopPkgCurBat]    NowPkgName[com.asus.launcher]   Battery[39] TimeTick[1440510555542] OldPkgName[com.ionicframework.myApp323408]
I/cm.log.servpro( 1129): [Privacy]/ com.ionicframework.myApp323408 is not in contact list
I/KRCMD   (16987): [MESSAGE] the exit process ok:com.ionicframework.myApp323408
D/LauncherLog(  927): AppsCustomizePagedView - syncAppsPageItems page: 5 index: 81 Item: myApp

Answer 1

将这个用于 ionic 中的地图完美运行！

https://github.com/allenhwkim/angularjs-google-maps

我完全删除了

<script src='lodash.min.js'></script> 
and 
<script src='angular-google-maps.min.js'></script>

删除了地图的 html 标记：

<ui-gmap-google-map center='map.center' zoom='map.zoom' dragging='false' options="map.options" scroll="false"></ui-gmap-google-map>

而是使用了 ngMap。使用简单。

加载js文件：

<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

将 ngMap 添加到您的应用程序：

var myApp = angular.module('myApp', ['ngMap']);

向页面添加地图标记（例如）：
```
<map center="41,-87" zoom="3"></map>
```

到目前为止，在 3 种不同的 android 设备上进行了测试，每台设备上大约有 10-15 个项目，行为稳定，并且还有不错的延迟加载功能！

Ionic Android 应用程序在滚动到 google 地图时崩溃

Ionic Android app crashes when scrolled to google maps

android

google-maps

angular-google-maps

ionic