离子3白屏谷歌地图
离子3白屏谷歌地图
提问于 2018-02-06 21:40:18
我试图在我的离子3项目中显示谷歌地图。但当我打字的时候
离子服务
它只显示一个灰色屏幕，在那里地图应该是没有错误的控制台。
这是我的代码：
home.ts*
import { Component , ViewChild,ElementRef } from '@angular/core';
import { NavController , Platform } from 'ionic-angular';
declare var google: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild("map") mapRef :ElementRef ;
constructor(public navCtrl: NavController, public platform :Platform) {
platform.ready().then(() => {
this.showMap();
});
}
showMap(){
const location = new google.maps.LatLng(30.414047, -9.580157);
const option ={
center :location ,
zoom : 15 ,
streetViewControl : false ,
mapTypeId :'roadMap'
} ;
const map =new google.maps.Map(this.mapRef.nativeElement ,option ) ;
this.addMarker(location, map);
}
addMarker(position , map){
return new google.maps.Marker({
position ,
map
}) ;
}}home.html
<ion-header>
<ion-navbar color="primary">
<ion-title>
Google maps
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map"></div>
</ion-content>home.sccs
page-home {
#map {
height: 100%;
}
}另外，我补充说：
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCIJTDtdHB4s381xQEwzVsfdBxbr9kWkJk" async defer></script>当我注释这一行时， *：*：
showMap(){
// streetViewControl : false ,
//mapTypeId :'roadMap'
} ;地图显示了.i，不知道为什么。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-07 15:04:19
这里是plnkr的一个例子，你如何初始化你的谷歌地图。
首先，您必须在ionViewDidLoad()中插入您的地图，并且您的地图容器需要有一个宽度:100%和高度:100%；
ionViewDidLoad() {
this.initMap();
}
initMap(){
//const location = new google.maps.LatLng(20.623736, -87.073395);
let myLatLng = {lat: 20.623736, lng: -87.073395};
console.log(location);
const option ={
center :myLatLng ,
zoom : 15 ,
//streetViewControl : false ,
//mapTypeId :'roadMap'
} ;
//console.log(this.mapElement)
const map = new google.maps.Map(this.mapElement.nativeElement ,option ) ;
this.addMarker(myLatLng, map);
}这是因为您没有使用本机插件。你得一直到你的页面被加载为止。
另一个观察是在您的函数addMarker中，您只传递要放置键的位置和映射值，values。
addMarker(position , map){
return new google.maps.Marker({
position: position,
map: map,
title: 'Hello World!'
});
}这是我为你做的一个完整的例子。
Stack Overflow用户
发布于 2018-02-07 01:16:31
我对标志性的框架不太了解。
但是google上的脚本没有回调，它加载异步。
为什么不尝试在调用脚本中添加回调。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=showMap" async defer></script>Stack Overflow用户
发布于 2018-02-06 23:32:13
问题可能在于您在constructor中调用它。尝试将构造函数代码放入ngAfterViewInit()方法中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48652410
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号