【发布时间】：2019-09-14 17:51:56
【问题描述】：
我正在尝试按照教程使用 Ionic 3 获取谷歌地图，但它不起作用。我看不到地图，只能看到一个空白页，这很奇怪，我可能是 Cordova 问题。我做了这些步骤来显示地图：
首先我获得了 Google Api Key。
我将以下行添加到我的 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 我应该能够看到地图，但不是这个，在“离子服务”之后我只能看到一个空白页面：
也许问题是“cordova.js”，它存在于 \platforms\android\platform_www 中，但我实际上不知道。 ms Edge 控制台告诉我：
SEC7112：来自http://localhost:8100/cordova.js 的脚本由于 MIME 类型不匹配而被阻止。
Angular 正在开发模式下运行。调用 enableProdMode() 以启用生产模式。 Native：尝试调用 StatusBar.styleDefault，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行 Native：尝试调用 SplashScreen.hide，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行
Edge 是 Ionic Serve 的默认浏览器，因此，将 url 从 Edge 复制并粘贴到 Chrome，我在控制台中阅读了以下日志：
2cordova.js:1 加载资源失败：服务器响应状态为 404（未找到）
Angular 正在开发模式下运行。调用 enableProdMode() 启用生产模式。
common.js:290 Native：尝试调用 StatusBar.styleDefault，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行
common.js:290 Native：尝试调用 SplashScreen.hide，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行
我只需要看地图，但我不知道为什么它不起作用：根据.ts文件，地图应该出现，但没有。
【问题讨论】：
-
您正试图在浏览器中显示本地 Google 地图对象。该地图仅在您在实际设备或模拟器上运行时才会显示（上面的消息实际上是这样说的）。在最新版本的 Ionic（和 Google 地图）中，您可以运行它并使用 ionic serve 显示地图。但是，您需要创建的地图略有不同，如下所示： this.map = GoogleMaps.create(element, options);
-
谢谢，但我只是从教程中尝试过。你能推荐一个使用 Ionic 的谷歌地图的好教程吗？但是，现在我正在使用我的设备尝试它，如果它有效，我会投票给你的答案
-
你好。使用智能手机也不起作用。空白页
标签： javascript html google-maps cordova ionic3