Question

大家我想在我的应用程序中使用谷歌地图。我已经为Android和ios安装了带有Api密钥的cordova插件googlemaps。我面临的问题只是显示谷歌徽标和缩放按钮，地图的整个区域是空白的。我正在关注本教程http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/。请指导我做错了什么。谢谢！ enter image description here

阶tracking.ts

import { Component } from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {
    GoogleMap,
    GoogleMapsEvent,
    GoogleMapsLatLng,
    CameraPosition,
    GoogleMapsMarkerOptions,
    GoogleMapsMarker
} from 'ionic-native';
/*
 Generated class for the OrderTracking page.

 See http://ionicframework.com/docs/v2/components/#navigation for more info on
 Ionic pages and navigation.
 */
@Component({
  selector: 'page-order-tracking',
  templateUrl: 'order-tracking.html'
})
export class OrderTracking {

  map: GoogleMap;

  constructor(public navCtrl: NavController, public platform: Platform) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap(){

    let location = new GoogleMapsLatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
    });

  }
}

阶tracking.scss

page-order-tracking {
  .scroll {
    height: 100%;
  }

  #map {
    width: 100%;
    height: 60%;
  }


  ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
 .tackdiv{
color:darkorange;
text-align: center;

  }
  .mytext{
margin-top: 10px;
color: lightgrey;
  }
  }
}

阶tracking.html

 <ion-content>
      <div id="map"></div>
<h1 class="tackdiv">Your order is dispatched </h1>
  <h4 class="mytext">Your order will be delivered in 32 mins</h4>
  <ion-item>
    <ion-avatar item-left>
      <img  src="assets/img/Umar.png">
    </ion-avatar>
    <h4>Umar </h4>
    <ion-icon name='call' item-right></ion-icon>
    <ion-icon name='mail' item-right></ion-icon>
  </ion-item>
    </ion-content>

Answer 1

我想这是一个典型的刷新问题。因此，在 loadMap 函数中，请尝试附加以下行：

this.map.setCenter(location);

此外，请确保您已从Google API Console启用了必要的Google API。我的如下：

Ionic2谷歌地图没有显示

1 个答案: