Fatal编程技术网
  • gradle/
  • Gradle 爱奥尼亚4传单地图在部署上不起作用，但在爱奥尼亚服务上起作用——devapp

Gradle 爱奥尼亚4传单地图在部署上不起作用，但在爱奥尼亚服务上起作用——devapp

gradle leaflet

Gradle 爱奥尼亚4传单地图在部署上不起作用，但在爱奥尼亚服务上起作用——devapp,gradle,leaflet,ionic4,openstreetmap,capacitor,Gradle,Leaflet,Ionic4,Openstreetmap,Capacitor,我有一个带有传单/openstreetmap的应用程序，它可以正常工作，没有任何问题。当在浏览器、android和IOS设备上运行ionic serve--devapp时，地图可以完美地工作。我已经通过带电容器的android studio在android设备上进行了部署测试，传单上没有显示，我找不到任何错误，我肯定它一定在某个地方。尽管传单/openstreetmap瓷砖不起作用，但标记和多边形以及我的应用程序的所有功能都正常工作，只是没有瓷砖 我真的不知道问题出在哪里，如果我的config.

我有一个带有传单/openstreetmap的应用程序，它可以正常工作，没有任何问题。当在浏览器、android和IOS设备上运行ionic serve--devapp时，地图可以完美地工作。我已经通过带电容器的android studio在android设备上进行了部署测试，传单上没有显示，我找不到任何错误，我肯定它一定在某个地方。尽管传单/openstreetmap瓷砖不起作用，但标记和多边形以及我的应用程序的所有功能都正常工作，只是没有瓷砖

我真的不知道问题出在哪里，如果我的config.xml或index.html中有任何关于依赖项或插件设置的建议或遗漏，我将不胜感激

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <!--leaflet.js-->
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/leaflet/angular-leaflet-directive.min.js"></script>

    <script src="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"></script>

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
  <app-root></app-root>
</body>

</html>
mapId div snipppet from map.html

我的离子环境如下

Ionic:

   Ionic CLI                     : 5.4.13 (C:\Users\riley.grice\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0,
                       cordova-plugin-ionic-webview 4.1.3,
                       cordova-plugin-android-permissions 1.0.2, 
                       cordova-plugin-camera 4.1.0, 
                       cordova-plugin-compat 1.2.0, 
                       cordova-plugin-device 2.0.2, 
                       cordova-plugin-flashlight 3.2.0, 
                       cordova-plugin-geolocation 4.0.2, 
                       cordova-plugin-splashscreen 5.0.2, 
                       cordova-plugin-statusbar 2.4.3, 
                       cordova-plugin-whitelist 1.3.4

Utility:

   cordova-res                          : not installed
   native-run (update available: 0.3.0) : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Users\riley.grice\AppData\Local\Android\Sdk)
   NodeJS            : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.1
   OS                : Windows 10
我找到了解决办法。在华为手机上，如果试图显示来自外部来源的地图块，它需要一个https URL而不是http URL，华为设备将拒绝该来源，这与三星不同。我只是简单地将http更改为https，就可以访问tile源代码，而无需对代码进行任何其他更改。

我从谷歌地图（Google Maps at developing in Android）了解到这一点。在那里，我需要一个Api密钥+封装，用于开发版本，一个用于发布版本，否则我在地图上看不到分幅。也许你有这样的问题？我找到了解决办法。在华为手机上，如果试图显示来自外部来源的地图块，它需要一个https URL而不是http URL，华为设备将拒绝该来源，这与三星不同。我只是简单地将http更改为https，并且可以访问互动程序源代码，而无需对代码进行任何其他更改。@themoose，谢谢，就是这样，我使用的是http互动程序服务器，它似乎只适用于https互动程序服务器。不幸的是，我使用的tile服务器没有https服务器：（我现在要使用默认的OSM tile了。。。 
leafletMap() {
     // In setView add latLng and zoom
     this.map = new L.Map('mapId').setView([this.lat,this.long], 9);

     L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
       attribution: 'edupala.com © ionic LeafLet',
     }).addTo(this.map);
}

Ionic:

   Ionic CLI                     : 5.4.13 (C:\Users\riley.grice\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0,
                       cordova-plugin-ionic-webview 4.1.3,
                       cordova-plugin-android-permissions 1.0.2, 
                       cordova-plugin-camera 4.1.0, 
                       cordova-plugin-compat 1.2.0, 
                       cordova-plugin-device 2.0.2, 
                       cordova-plugin-flashlight 3.2.0, 
                       cordova-plugin-geolocation 4.0.2, 
                       cordova-plugin-splashscreen 5.0.2, 
                       cordova-plugin-statusbar 2.4.3, 
                       cordova-plugin-whitelist 1.3.4

Utility:

   cordova-res                          : not installed
   native-run (update available: 0.3.0) : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Users\riley.grice\AppData\Local\Android\Sdk)
   NodeJS            : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.1
   OS                : Windows 10