谷歌地图不适用于 ionic cordova run android

Posted 2023-03-16

【中文标题】谷歌地图不适用于 ionic cordova run android

【英文标题】：Google maps not working with ionic cordova run android

【发布时间】：2018-01-02 03:51:04

【问题描述】：

我正在使用 ionic 框架构建应用程序。该应用程序的主要功能是基于谷歌地图。我使用了this tutorial，它使用了java script google maps API。当我运行 ionic lab 或 ionic serve 时，一切都运行良好，但是当通过运行使用 android 模拟器时： ionic cordova run android 谷歌地图应该是完全空白的地方。我也没有收到任何错误消息。此外，我正在使用 cordova 7.0.1 版和 ionic 3.5.0 版。我已经尝试了this question 中列出的两种解决方案，但问题仍然存在。

这是 config.xml 中希望相关的部分，正如另一篇文章所建议的那样

<content src="index.html" />
<access origin="*" />
<access origin="http://maps.google.com" />
<access launch-external="yes" origin="geo:*" />
<allow-navigation href="http://ionic.local/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://maps.google.com" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
    <allow-intent href="market:*" />

另外这里是我链接到 api 的 index.html

<script src="https://maps.google.com/maps/api/js?key=
MY_ACTUAL_API_KEY" type="text/javascript"></script>
<script src="cordova.js"></script>

这里要求的是使用谷歌地图的主页的 ts html 和 css html

<ion-header>
<ion-navbar>
<ion-title>
  Smell Louisville
</ion-title>
</ion-navbar>
</ion-header>

<ion-content>

<ion-fab top right><button ion-fab round [color]="refr"id="Refr"     
(click)="refMap();setStuff();pickColor();getLatLng();markerOnLocal()"><ion-
icon name="refresh-circle"></ion-icon></button></ion-fab>

<div #map id="map"></div>
<div id="pad"></div>
<button (click)="openFormPage()" id="hundPer" ion-button outline     
[color]="button1"><div #LeavRev id="LeaVRev"><p id="CenterP">Report how your     
air smells</p></div></button>
<div id="pad"></div>
<button (click)="openPastPage();"id="hundPer" ion-button outline 
[color]="button2"> <div #Prev id="PreV"><p id="CenterP">View maps from 
previous days</p></div></button>
<div id="hundPer">
<button id="hundPer">
<button (click)="openSettingsPage()"><ion-icon id="right"name="settings">    
</ion-icon></button>
<button (click)="openAboutPage()"><ion-icon id="right"name="people"></ion-
icon></button>
<button (click)="openPMPage()" id="pad"><ion-icon id="right">PM2.5</ion-
icon>    
</button>
<button (click)="openCitationPage()" id="pad"><ion-icon id="right" 
name="clipboard"></ion-icon></button>
<button (click)="openHelpPage()" id="pad"><ion-icon id="right" name="help">
</ion-icon></button>
<button (click)="openKeySendPage()" id="pad"><ion-icon id="right" 
name="key"></ion-icon></button>
</button>
</div>

css

page-home 
#mapheight:75%


#LeavRevborder:solid
;border-color: green
#Prevborder:solid
;border-color: royalblue
#padheight:1%
#padLheight:1%; width:10%; float:left
#padRheight:1%; width:100%; float: right; background-color:#E5E5E5
#refrbackground-color: #6dc066;border:solid;align-content:right;border-                
color: green;color:whitesmoke

#CenterPtext-align: center
#hundPerwidth:100%

#rightfloat:right
#leftfloat:left

希望只是相关部分

import  Component, ViewChild  from '@angular/core';
import  NavController, NavParams, Events,AlertController  from 'ionic-
angular';
import  Geolocation  from '@ionic-native/geolocation';
import  FormPage  from '../form/form';
import  PastPage  from '../past/past';
import  AboutPage from '../about/about';
import  HelpPage from '../help/help';
import  KeySendPage  from '../key-send/key-send'
import  SettingsPage  from '../settings/settings';
import Storage  from '@ionic/storage';
importPm2_5Page from '../pm2-5/pm2-5';
import CitationPage from '../citation/citation';
importSendMarkerProvider  from '../../providers/send-marker/send-
marker';
import NotificationsPage from '../notifications/notifications';


import  AngularFireDatabase  from 'angularfire2/database';
//leaving out parts not pertaining to google maps
export class HomePage 
@ViewChild('map') mapElement;
map: any;
constructor(public navCtrl: NavController, public geolocation: Geolocation,         
public navParams: NavParams,
public storage:Storage, public events: Events, public     
sendMarker:SendMarkerProvider, private alertCtrl: AlertController,
private fdb:AngularFireDatabase)
//there is some stuff in the constructor but hopefully it is not relevant I 
//trying to reduce the amount of code you have to read through
 
 ionViewDidLoad()
console.log(this.mapInitDid)
this.mapInitDid=false;
this.initMap();


//initMap() is supposed to load the map and it doesnt on the android 
//emulator
initMap()
this.geolocation.getCurrentPosition().then((position) => 
let latLng = new google.maps.LatLng(38.2527, -85.7585)
pos=new google.maps.LatLng(38.2527, -85.7585);
console.log(this.havePerms);
console.log(latLng)

  if(this.havePerms==1)
  latLng = new google.maps.LatLng(position.coords.latitude,         
position.coords.longitude);
  
  let mapOptions = 
    center: latLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  

  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

, (err) => 
  console.log(err);
);

 console.log("map is go");
 this.mapInitDid=true;
// this.markerOnLocal();

任何帮助将不胜感激

【问题讨论】：

在您的问题中添加ts、html 和css 代码。

ionic-native 的 GoogleMaps 插件是首选替代选择。 github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/…

是的，我在搜索中看到了，但是如果没有其他方式我将使用 ionic native 插件，我已经围绕这种方式构建了一个完整的应用程序（我将来也会使用它项目），但如果可能的话，我更愿意修复我当前的实现

【参考方案1】：

事实证明，我实际上是在解决错误的问题。 api 加载正常，但设备内部没有运行任何代码

this.geolocation.getCurrentPosition().then((position) => 
...
);

其中包含我生成地图的所有代码。为了解决这个问题，我将本节中与用户位置无关的所有内容放在initMap() 中，这是this.geolocation.get... 所在的方法