OpenStreetMap未在Android上显示

Question

I'm trying to create an app whose main ability is to show items on a map. 我正在尝试创建一个应用程序，其主要功能是在地图上显示项目。 I decided to use ionic (on top of Apache Cordova) as my base framework and OpenStreetMap as the map provider. 我决定使用ionic（在Apache Cordova之上）作为我的基本框架，并使用OpenStreetMap作为地图提供程序。 When using ionic to serve the app to my Browser (Chrome, btw) everything works as expected. 使用ionic将应用程序投放到我的浏览器（Chrome，顺便说一句）时，一切正常。 Map is showing up the way I want it. 地图显示了我想要的方式。 Using my cellphone (LG Nexus 4) to preview the app results in tiles not showing up. 使用我的手机（LG Nexus 4）预览应用程序会导致图块未显示。 What is strange is that controls work (I used the angular binding to two input fields to check that), which means I can navigate around, zoom and all that, it simply does not show anything. 奇怪的是，控件可以正常工作（我使用了角度绑定到两个输入字段来进行检查），这意味着我可以浏览，缩放以及所有这些内容，而它根本不显示任何内容。

Browser view: Here it works 浏览器视图：在这里工作
Phone view: Here it doesn't 电话视图：这里没有

Here's some of the code I used: 这是我使用的一些代码：

map.html: 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 (excerpt): controller.js（节选）：

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

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

index.html 的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 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>

As you might be able to tell, I'm fairly new to app delevopment with Cordova. 如您所知，Cordova对于应用程序开发来说是相当陌生的。 I'd like any sort of help here, because this is driving me insane. 我在这里需要任何帮助，因为这让我发疯。 If you'd like to see more code, please let me know. 如果您想查看更多代码，请告诉我。

Answer 1

I know found what was causing the problem. 我知道是什么原因造成的。 Somehow Cordova does not interpret URLs of the form "//example.com/page" correctly, so I had to fix it using a "special" version of the OSM layer. 不知何故，Cordova不能正确解释“ //example.com/page”形式的URL，因此我不得不使用OSM层的“特殊”版本来修复它。

The updated files here: 更新的文件在这里：

map.html: 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 (excerpt): 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上显示

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-03-16 20:30:06

OpenStreetMap未在Android上显示

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-03-16 20:30:06

解决方案1
4 已采纳 2015-03-16 20:30:06