Question

我正在尝试按照教程使用Ionic 3获取google maps地图，但是它不起作用。我看不到地图，只能看到空白页，这很奇怪，可能是科尔多瓦的问题。我按照以下步骤显示了地图：

首先，我获得了Google Api密钥。

我在src / index.html文件中添加了以下行：

<script src="http://maps.google.com/maps/api/js?key={MY API KEY}"></script>
<script src="cordova.js"></script>

index.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  
  <script src="http://maps.google.com/maps/api/js?key=AIzaSyB5yUt2p89SDb8x4rHX23EDGNGyKpgRzyU"></script>
  <script src="cordova.js"></script>

  <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" />

  <!-- 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>

因此，我修改了src / app / home / home.page.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  
  <script src="http://maps.google.com/maps/api/js?key=AIzaSyB5yUt2p89SDb8x4rHX23EDGNGyKpgRzyU"></script>
  <script src="cordova.js"></script>

  <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" />

  <!-- 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>

和home.page.ts：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from '@ionic/angular';

declare var google;

@Component({
  selector: 'home-page',
  templateUrl: 'home.page.html'
})
export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){

    let latLng = new google.maps.LatLng(-34.9290, 138.6010);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

  }
}

最后，我用以下代码修改了home.page.scss：

.ios, .md {

    home-page {

      .scroll {
        height: 100%
      }

      #map {
        width: 100%;
        height: 100%;
      }

    }

}

在上面的scss中，我应该能够看到地图，但相反，在“离子服务”之后，我只能看到空白页面：

也许问题出在\ platforms \ android \ platform_www中，是'cordova.js'，但我实际上并不知道。 ms Edge控制台向我显示：

SEC7112：http://localhost:8100/cordova.js中的脚本由于MIME类型不匹配而被阻止。

Angular在开发模式下运行。调用enableProdMode（）以启用生产模式。    本机：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或在设备/模拟器中运行    本机：尝试调用SplashScreen.hide，但Cordova不可用。确保包含cordova.js或在设备/模拟器中运行

Edge是Ionic Serve的默认浏览器，因此，将URL从Edge复制并粘贴到Chrome，我在控制台中阅读以下日志：

2cordova.js：1无法加载资源：服务器以404（未找到）状态响应

Angular在开发模式下运行。调用enableProdMode（）以启用生产模式。

common.js：290本机：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或在设备/模拟器中运行

common.js：290本机：尝试调用SplashScreen.hide，但Cordova不可用。确保包含cordova.js或在设备/模拟器中运行

我只需要查看地图，但是我不知道为什么它不起作用：根据.ts文件，应该显示地图，但是不显示。

Answer 1

您可以尝试添加type="text/javascript"：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key={MY API KEY}"></script>

带有Google地图的Ionic 3：未显示地图

1 个答案: