带有谷歌地图的离子2-空白屏幕出现
带有谷歌地图的离子2-空白屏幕出现
提问于 2016-05-12 10:01:20
我想这对于离子/角质的人来说应该很简单。由于某些原因，我无法让这个简单的脚本工作(Ionic2和GMaps)。
下面是我的代码: 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);
});
}
}我在这里添加了我的代码(包含Gmap的Ionic2项目)：http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview
你可以在里面找到："home.ts“的脚本，我下面有注释代码，因为在我把它加回去的时候，我所有的离子项目都关闭了，你可以试着取消注释。
我也在Gmap项目中找到了Angular2，但是我找不到Gmap的Ionic2项目。这里：
Angular2 Gmap
有人能看出哪里出了什么问题吗？
非常感谢!
伊兰。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-05-12 12:31:03
我用ionic2和google创建了一个示例应用程序。https://github.com/nazrul104/google-map-with-ionic2。可能对你有帮助！
Stack Overflow用户
发布于 2017-01-18 14:34:50
- 检查你是否以正确的方式安装插件。
- 在console.developers.google.com上验证API键
- 确保注入映射的HTML元素具有预定义的高度属性。
- 确保您在连接或虚拟设备上运行您的应用程序。
如果这不起作用的话:我已经创建了一个Ionic 2.0.0-rc.5启动器，功能最小的https://github.com/0x1ad2/ionic2-starter-google-maps
Stack Overflow用户
发布于 2016-05-13 05:16:53
感谢@Nazrul，这里是我在ts页面文件中所做的更改：
export class Page1 {
constructor() {
this.loadMap();
}
loadMap(){
let options = {timeout: 10000, enableHighAccuracy: true};
//ENABLE THE FOLLOWING:
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.querySelector('#map'), mapOptions);
var x = document.querySelector('#map');
console.log(x);
});
}
}现在我可以看到地图了:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37183568
复制相关文章
相似问题
腾讯云开发者
