Я пытаюсь получить карту Google Maps с помощью Ionic 3, следуя инструкции, но она не работает. Я не вижу карту, но только пустую страницу, и это странно, но это проблема Кордовы. Я сделал эти шаги, чтобы показать карту:
Прежде всего, я получил Google Api Key.
Я добавил следующие строки в свой файл src / index.html:
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', который присутствует в \ platform \ android \ platform_www, но на самом деле я не знаю. Консоль 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 карты должны появляться, но нет.