我使用 Ionic 3 版本,并尝试在我的应用程序中添加一个页面,以显示带有标记的 map 。 我已经在我的应用程序中使用了用于自动完成的 Google map ID(Google 地点...)。 我访问了 Google API,并将 map 嵌入、Javascript 等添加到了我的 API key 中。 但页面底部显示“Google”和“显示按钮”,但 map 是空的。 请参阅附件...
安装 Cordova 和 Ionic Native 插件:
$ ionic cordova 插件添加 https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --变量 API_KEY_FOR_ANDROID="AIzaSyB6mEnxH4vC++++++++++9wnXXNNmK2co"--变量 API_KEY_FOR_IOS="AIzaSyB6mEnxH4v++++++++++++++wnXXNNmK2co" $ npm install --save @ionic-native/google-maps
Home.ts:
import { NavController } from 'ionic-angular';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMaps, CameraPosition, GoogleMapsEvent, GoogleMap, MarkerOptions, Marker } from "@ionic-native/google-maps";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) {
}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
// <ion-content>
// <div #map id="map" style="height:100%;"></div>
// </ion-content>
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
}
);
// create CameraPosition
let position: CameraPosition = {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
};
// move the map's camera to position
}
}
首页.HTML
Home.html :
<ion-header>
<ion-navbar>
<ion-title>
Map
</ion-title>
<ion-buttons end>
<button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div #map id="map" style="height:100%;"></div>
</ion-content>
首页.scss
page-home {
}
最佳答案
不要使用ngAfterViewInit
。
您必须等待platform.ready()
// Wait the native plugin is ready.
platform.ready().then(() => {
this.loadMap();
});
仓库:https://github.com/mapsplugin/ionic-google-maps
当前官方文档页面有误。我发送了拉取请求,但现在正在等待。 https://github.com/ionic-team/ionic-native/pull/1834
关于ionic-framework - Ionic 3 Google map 在 Android + IOS 上不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45304929/