Ionic native Google Maps Android无法工作
我必须添加我的项目与谷歌地图地图视图。我遵循了official ionic native Google maps documentation，但它不起作用。
我给包含地图的div分配了粉红色的背景色(用于测试)，在将地图添加到div之前，div显示正确。但是，当贴图添加到div时，模式窗口的背景将变为透明，并且div将消失。但是没有显示错误。
我尝试了不同的方法将贴图附加到div上，但结果是相同的。
当我使用离子文档的代码时，我得到了这样的错误消息："GoogleMaps已弃用，请使用GoogleMaps.create()“。我尝试使用GoogleMaps.create()而不是构造函数的参数来避免此错误消息，但仍然不起作用。
我的离子内容：
<ion-content fullscreen overflow-scroll="true" class="container">
<div #map id="map"></div>
</ion-content>css的一部分：
#map {
height: 90%;
width: 100%;
border-width: 5px;
border-color: red;
background: pink;
}这里我们得到了ts的片段：
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
...
export class PerfilPage {
@ViewChild(Content) content: Content;
@ViewChild('map') mapElement: ElementRef;
map: GoogleMap;
...
ionViewDidLoad() {
// I use this for changing the nab-bar color
this.content.ionScroll.subscribe((scroll) => {
// console.log('user scrolled', scroll);
if ( scroll.scrollTop > 100 ) {
this.toolbar_color = "bg_search"
} else {
this.toolbar_color = "transparent"
}
this.ref.detectChanges();
});
// this.loadMap();
// this.initMap();
// this.testMap();
this.offiMap();
}
// Official Ionic documentation code
offiMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = this.googleMaps.create('map', 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');
});
});
});
}
}PS: API键适用于其他项目(不是离子项目)，所以idk哪里有问题。
谢谢:)
回答 3
Stack Overflow用户
发布于 2017-11-18 01:44:59
正如我在git代码库中所描述的，地图插件将本地地图视图放在浏览器的下方(或后面)。
https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work
这就是为什么map div的所有父元素都变得透明的原因。
如果您需要设置应用程序的背景，则需要使用Environment.setBackground("pink")。
由于地图显示在浏览器下，这个插件不能在对话框中显示。
Stack Overflow用户
发布于 2017-11-16 18:14:47
loadMap() {
let element = document.getElementById('map');
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
let map: GoogleMap = this.googleMaps.create(element, mapOptions);
map.addMarker({
title: 'Location',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
//alert('clicked');
});
});
}尝尝这个
Stack Overflow用户
发布于 2018-06-07 00:52:16
我遇到了与OP在遵循Official Ionic Native Google Maps Guide时遇到的完全相同的问题
在幻灯片页面上有一个误导性的Google Maps API Key。幻灯片中的网址是 ，这是不正确的。
用于生成适用于安卓和IOS的谷歌地图应用编程接口密钥，我们使用谷歌云平台
这是我问过同样问题的链接Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )
希望它能帮助那些有同样问题的人。
https://stackoverflow.com/questions/47326434
复制相似问题
腾讯云开发者
