我想它应该是简单的离子/ Angular人。 由于某种原因,我无法得到这个简单的脚本工作(Ionic2与GMaps)。Ionic 2与谷歌地图 - 空白屏幕出现
这里是我的代码: Map.html:
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Google Map</ion-title>
<ion-buttons end>
<button (click)="addMarker()">
<ion-icon name="add"></ion-icon>Add Marker
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="map">
<div id="map"></div>
</ion-content>
Map.ts:
import {Page, NavController, Platform} from 'ionic-angular';
import {Geolocation} from 'ionic-native';
/*
Generated class for the MapPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Page({
templateUrl: 'build/pages/map/map.html',
})
export class MapPage {
constructor(public nav: NavController, platform: Platform) {
this.nav = nav;
this.map = null;
// this.platform = platform;
// this.initializeMap();
this.platform = platform;
platform.ready().then(() => {
this.loadMap();
});
}
loadMap(){
let options = {timeout: 10000, enableHighAccuracy: true};
Geolocation.getCurrentPosition(options).then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
});
}
}
我增加了我的代码在这里(内Ionic2项目,GMAP): http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview
你可以在里面找到:“home.ts”这个脚本,我对下面的代码发表评论,因为在我加入它的那一刻我的所有离子项目已关闭,您可以尝试取消注释。
我也发现Angular2与Gmap项目,但我找不到与Gmap的Ionic2项目。在这里:
任何人都可以看到什么是错的呢?
非常感谢!
伊兰。
虽然链接可能回答这个问题,答案应该直接包含的相关部分。链接可能变得陈旧。 –
非常感谢,我翻阅了代码,它的工作原理! :) –