OpenStreetMap 未显示在 Android

Question

我正在尝试创建一个主要功能是在地图上显示项目的应用程序。我决定使用 ionic（在 Apache Cordova 之上）作为我的基础框架，并使用 OpenStreetMap 作为地图提供者。当使用 ionic 将应用程序提供给我的浏览器时（Chrome，顺便说一句）一切都按预期工作。地图以我想要的方式显示。使用我的手机 (LG Nexus 4) 预览应用程序会导致磁贴不显示。奇怪的是控件工作（我使用 angular 绑定到两个输入字段来检查），这意味着我可以四处导航、缩放等等，它只是不显示任何东西。

浏览器视图：Here it works
Phone 视图：Here it doesn't

这是我使用的一些代码：

map.html:

<ion-view ng-controller="StringController as s" view-title="{{s.strings.map}}">
<ion-content ng-controller="MapController">
    <leaflet center="center" defaults="defaults">
        <input type="text" ng-model="center.lat" style="margin-left:200px;" />
        <input type="text" ng-model="center.lng" style="margin-left:200px;" />
    </leaflet>
  </ion-content>
</ion-view>

controller.js（节选）：

.controller('MapController', ['$scope', function($scope){
  angular.extend($scope, {
    center: {
      lat: 51.1642292,
      lng: 10.4541194,
      zoom: 6
    },

    defaults: {
      zoomControl: false
    }
  });
}]);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="lib/leaflet/leaflet.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- openstreetmaps vendor plugin -->
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/strings.js"></script>
  </head>

  <body ng-app="finder">
    <ion-side-menus>
        <ion-side-menu-content></ion-side-menu-content>
        <ion-side-menu side="left"></ion-side-menu>
    </ion-side-menus>

    <ion-nav-view></ion-nav-view>
  </body>
</html>

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="info.wphp.finder" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="21" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>

如您所知，我对使用 Cordova 开发应用程序还很陌生。我想在这里得到任何帮助，因为这让我发疯。如果您想查看更多代码，请告诉我。

Answer 1

我知道是什么导致了这个问题。 Cordova 不知何故无法正确解释“//example.com/page”形式的 URL，因此我不得不使用 "special" 版本的 OSM 层来修复它。

此处更新的文件：

map.html:

<ion-view ng-controller="StringController as s" view-title="{{s.strings.map}}">
  <ion-content ng-controller="MapController">
    <leaflet center="center" defaults="defaults" layers="layers">
        <input type="text" ng-model="center.lat" style="margin-left:200px;" />
        <input type="text" ng-model="center.lng" style="margin-left:200px;" />
    </leaflet>
  </ion-content>
</ion-view>

controller.js（节选）：

.controller('MapController', ['$scope', function($scope){
  angular.extend($scope, {
    center: {
      lat: 51.1642292,
      lng: 10.4541194,
      zoom: 6
    },

    defaults: {
      zoomControl: false
    },

    layers: {
      baselayers: {
        osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
        }
      }
    }
  });
}]);

OpenStreetMap 未显示在 Android

OpenStreetMap not showing up on Android

android

openstreetmap

angularjs

leaflet

cordova