如何将谷歌地图添加到android

Posted 2023-03-16

【中文标题】如何将谷歌地图添加到android

【英文标题】：how to add google maps to android

【发布时间】：2020-07-27 00:13:06

【问题描述】：

我想在我的应用上显示地图。我使用 ionic 创建它，当我使用 ionic cordova run browser 运行时，它显示的正是我想要的，就像这样。

但是当我尝试从真实设备 android ionic cordova run android 运行它时，它会显示带有 google 徽标的白屏，如下面的屏幕显示。

这是我的代码：.ts 文件。

export class AddAccountPage implements OnInit 
  modalTitle:string;
  modelId:number;
  @ViewChild('map') element: ElementRef;
  map: GoogleMap;

  constructor(private modalController: ModalController, public plt: Platform, public nav: NavController)  

  ngOnInit() 

  

  ionViewDidEnter() 
    this.plt.ready().then(() => 
      this.initMap();
    );
  

  initMap() 

    // This code is necessary for browser
    Environment.setEnv(
      'API_KEY_FOR_BROWSER_RELEASE': 'key',
      'API_KEY_FOR_BROWSER_DEBUG': 'key'
    );

    this.map = GoogleMaps.create(this.element.nativeElement);

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => 
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = 
        target: coordinates,
        zoom: 17
      ;
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = 
        position: coordinates
      ;
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => 
          marker.showInfoWindow();
        );
    )
  

在.html 文件上

<ion-content fullscreen>
  <div #map style="height:100%;"></div>
</ion-content>

最后是config.xml。

对于api，我使用的是随机字符串，而不是真正的api，因为我没有。

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
<preference name="GOOGLE_MAPS_ios_API_KEY" value="(api key)" />

【问题讨论】：

看起来像权限问题！请检查您的设备控制台是否有错误。

没有错误..

您的设备位置/GPS 是否开启？

是的，我不知道为什么.. 如果我取消 ionic cordova run android -l 然后我运行 ionic cordova run browser -l 地图将显示在设备上并在浏览器上显示错误，当我再次运行 ionic cordova run android -l 时，设备上的地图将再次丢失..

【参考方案1】：

试一试示例：

为当前位置安装插件： https://ionicframework.com/docs/native/geolocation

在你的 index.html 中 添加api密钥

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

在您的 HTML 中：

<ion-content>
  <div #map id="map"></div>
</ion-content>

在您的 CSS 中：

#map 
  width: 100%;
 height: 100vh;

在您的 .ts 中

import  Component, ViewChild, ElementRef   from '@angular/core';
import  Geolocation  from '@ionic-native/geolocation/ngx';
declare var google;

export class HomePage 

@ViewChild('map', static: false) mapElement: ElementRef;

  map: any;

  constructor(
    private geolocation: Geolocation
  ) 

  ngOnInit() 
    this.loadMap();
  

  loadMap() 
    let that = this;
    this.geolocation.getCurrentPosition().then((resp) => 
      let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      let mapOptions = 
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      

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

    ).catch((error) => 
      console.log('Error getting location', error);
    );
  

【讨论】：

是的，我之前已经尝试过了，这是另一种选择.. 我只是想知道我的脚本不起作用..