Question

我正在尝试在我的Ionic 2应用程序上嵌入谷歌地图，但地图没有显示。我从https://ionicframework.com/docs/native/google-maps/获取了代码这是我的代码：
的 home.html的的

<ion-content>
  <div id="map_canvas" class="map"></div>
  <button ion-button (click)="loadMap()"></button>
</ion-content>

的 home.ts

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;

  constructor(public navCtrl: NavController,
              public appService: AppService,
              public apiService: ApiService,
              public util: Util,
              private geolocation: Geolocation,
              private googleMaps: GoogleMaps
            ) {
  }

loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map_canvas', 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');
                    });
              });

        });
  }

如前所述，我使用以下两个命令安装了插件：

ionic plugin add cordova-plugin-googlemaps
npm install --save @ionic-native/google-maps

当然，我指定了我的Android和iOS API密钥。

来自package.json，@ionic-native/google-maps版本4.3.3和cordova-plugin-googlemaps版本为2.1.1

当我的页面加载时，我的div是空白的。当我触发小按钮加载地图时，我有一个控制台日志，说“地图准备就绪”，没有错误，我的请求出现在API控制台上

没有地图的形状，没有Google徽标，只有一个空白屏幕，没有任何负载。

提前感谢您的帮助！

Answer 1

要将Ionic Native添加到您的应用程序，请运行以下命令来安装核心软件包：

npm install @ionic-native/core --save

请注意，许多离子原生插件仅适用于real device。如果你在网上运行它将无法运作。

您可以check this up了解有关使用离线2的Google地图的更多信息。

谷歌地图没有显示Ionic 2本地谷歌地图插件

1 个答案: