我刚开始使用ionic,我尝试在我的应用程序中集成一个谷歌Map和ionic-native-googlemaps,在我的浏览器中它运行良好,但是当我为android或ios构建时,我有一个空白页面,如果我在url chrome://inspect/device查看谷歌chrome的控制台,我没有错误。
这是我的 typescript 文件
import {AfterViewInit, Component, OnInit} from '@angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
MarkerOptions,
Marker,
Environment, LatLng, GoogleMapOptions
} from '@ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '@ionic/angular';
@Component({
selector: 'app-favoris',
templateUrl: './favoris.component.html',
styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
map: GoogleMap;
constructor(
public alertController: AlertController,
public actionCtrl: ActionSheetController,
private platform: Platform
) {
}
ngOnInit() {
// await this.platform.ready();
// await this.loadMap();
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
const map = GoogleMaps.create('map');
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
const position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
const markerOptions: MarkerOptions = {
position: coordinates,
// icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
title: 'Hello California',
draggable: true
};
const marker = map.addMarker( markerOptions )
.then( ( markesr: Marker ) => {
markesr.showInfoWindow();
});
});
}
}
在我的html文件中
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-toolbar class="new-background-color">
<ion-title class="text-center text-white">Favoris</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
</ion-app>
型
我到处寻找解决办法,但一无所获。
4条答案
按热度按时间0md85ypi1#
最后我解决了我的问题,如果有人有同样的问题后,只是降级一个版本离子谷歌Map和离子核心这样
之后,看看你的div与谁包含谷歌,如果是有一个500px的高度或更多,如果它的确定,你的Map工作罚款,你需要支付谷歌Map了。
ilmyapht2#
你不必降级googleMap .有两种方法可以解决这个问题:
首先,您可以将标记DIV放在离子含量之外
或者你可以添加样式css来把内容背景透明的覆盖在Map屏幕上。
zhte4eai3#
在我的例子中,它显示在Android上,但没有IOS。API键是好的。Map在那里,在html下,但离子内容是不透明的。
尝试将其添加到全局scss或css文件中。
z2acfund4#
对于iOS和Chrome,如果您的应用程序具有“位置”功能,Apple对位置安全方面很重视,Google Chrome也有些重视。因此:
1.步骤1.在Mac中,在“安全和隐私”下启用“定位服务”:导航到“设置”=〉“安全和隐私”=〉隐私选项卡=〉选择定位服务;点击挂锁进行更改=〉确保勾选Google Chrome的复选框
1.步骤2.在谷歌浏览器中进入设置=〉隐私和安全=〉确保localhost:8100在'允许'列表中=〉点击它,并在下一个选项卡'重置权限',并选择'允许'在下拉框中的位置属性.
应该够了。