Google本地cordova插件，Ionic 3只显示一个灰色框
我试图得到一张地图显示，所有我得到的是一个灰色盒子与谷歌的标志在底部。我看过这个网站上的其他帖子，并且尝试了所有这些，但似乎没有一个能解决这个问题。我正在使用离子型3.12.0与cordova插件googlemaps 2.0.7，我已经确保API键是正确的，并在仪表板中启用。
我试过使用教程，下面的https://ionicframework.com/docs/native/google-maps/是代码
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
import { Component, Input, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
@Component({
selector: 'map',
template: '<div #map id="map"></div>'
})
export class Map {
map: GoogleMap;
mapElement: HTMLElement;
constructor(private googleMaps: GoogleMaps) { }
setMapLocation(coords: any) {
this.map.setCameraTarget(coords);
}
ionViewDidLoad() {
this.loadMap();
}
loadMap() {
this.mapElement = document.getElementById('map');
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = this.googleMaps.create(this.mapElement, mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
// Now you can use all methods safely.
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
alert('clicked');
});
});
});
}}我添加的CSS是
#map {
width: 100% !important;
height: 100% !important;
img{ max-width: none !important; }
overflow:visible !important;
z-index: 1;
}
ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
}回答 3
Stack Overflow用户
发布于 2017-09-25 16:31:17
我也有同样的问题，
这对我有用。
删除google地图插件，删除平台
Re用不同的API键添加插件重新添加平台
Stack Overflow用户
发布于 2017-12-05 14:59:37
可能有各种各样的原因。
(或)应该在中启用。
检查您的Google密钥的有效性和限制。
使用来自@ ElementRef /core的HTMLElement而不是HTMLElement。
试试这个：https://codeburst.io/native-google-maps-and-geolocation-ionic-fe635a00249d
Stack Overflow用户
发布于 2018-06-29 15:09:19
您将不得不设置帐单(您将不收费)
搜索: API
为Android启用Maps SDK
为iOS启用Maps SDK
生成API密钥
创建一个新的离子项目，当被问及是否需要cordova支持时，按Y键。
ionic start yourProjectName blank完成后做
cd yourProjectName将平台添加到项目中。
ionic cordova platform add ios
ionic cordova platform add android那就跑
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YourGeneratedApiKeyFromGoogleCloudPlatform"
--variable API_KEY_FOR_IOS="YourGeneratedApiKeyFromGoogleCloudPlatform"那就跑
npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest所以现在您已经安装了所有的东西，并且需要将模块导入到ts文件中。
在app.module.ts import { GoogleMaps } from '@ionic-native/google-maps'中并将GoogleMaps添加到提供程序数组中。
providers: [
StatusBar,
SplashScreen,
GoogleMaps,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]现在您需要设置TS、HTML和SCSS。
我将粘贴前面所有步骤的工作代码。
home.ts
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor() { }
ionViewDidLoad() {
this.loadMap();
}
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
let marker: Marker = this.map.addMarkerSync({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
});
}
}home.html
<ion-content padding>
<h3>Ionic GoogleMaps Starter</h3>
<div id="map_canvas">
<button ion-button >Start demo</button>
</div>
</ion-content>home.scss
page-home {
#map_canvas {
height: 90%;
}
}如果地图仍然是灰色的，这意味着您的API键没有在正确的位置使用。
检查这些文件
config.xml
package.json
和platforms/android/app/src/main/AndroidManifest.xml
这3个文件拥有您的API密钥。
检查他们的钥匙，并与你的钥匙比较
不要编辑AndroidManifest.xml，它在构建时会被重写。
祝你好运
https://stackoverflow.com/questions/46409507
复制相似问题
腾讯云开发者
