Question

我想在我的应用程序中显示地图，但Google地图没有显示。我在Ionic上制作了应用程序，并使用了Cordova Google Maps插件。 Here是我的代码的链接。请帮我。

Answer 1

尝试在config.xml插件列表中添加：

<plugin name="cordova-plugin-googlemaps" spec="~2.0.6">
    <variable name="API_KEY_FOR_ANDROID" value="Your_key" />
</plugin>

Answer 2

您是否已在Google地图中注册并添加了API KEY吗？

Answer 3

以下是有效的代码：

import { Component } from '@angular/core';


import { NavController } from 'ionic-angular';
import { GoogleMap, GoogleMaps, LatLng, CameraPosition, GoogleMapsEvent } from '@ionic-native/google-maps';

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

  constructor(public navCtrl: NavController, public googleMaps: GoogleMaps) {

  }

  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {
    let element = document.getElementById('map');
    let map: GoogleMap = this.googleMaps.create(element, {});
    let latlng = new LatLng(40.7128, -74.0059);


    map.one(GoogleMapsEvent.MAP_READY).then(() => {
        let position: CameraPosition = {
      target: latlng,
      zoom: 10,
      tilt: 30
        }
        map.moveCamera(position);
    })
  }

}

并在您的HTML文件中

<div #map id="map" style="height:100%;"></div>

这是教程：http://tphangout.com/ionic-2-google-maps/

Answer 4

1。打开项目目录并在cmd中运行

## Q:\Test\2018\11\15\SO_53322626_2.ps1

$RE = "^(?<Name>[^ ]+) (?<Total>\d+[KMG]) Total(, (?<used>\d+[KMG]) Used)?, (?<free>\d+[KMG])"

$Data = Get-Content '.\PDC_AVERE_SWAP_OP.txt' |Select-Object -skip 1| ForEach-Object{
    if ($_ -match $RE){
        [PSCustomObject]@{
           Name = $Matches.Name
           Total= $Matches.Total
           used = $Matches.used
           free = $Matches.free
        }
    } else {Write-Host ("{0} didn't match RegEx" -f $_)}
}
$Data
$Data | Export-Csv '.\PDC_AVERE_SWAP_OP.csv' -NoTypeInformation
#$Data | Export-Excel  '.\PDC_AVERE_SWAP_OP.xlsx' -AutoSize

2。在特定的地图页面中添加

 ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="api key" -variable API_KEY_FOR_IOS="api key here"

3。在同一个班级

declare var google;

4.in home.html

    ionViewDidLoad() {
    if (this.global.checkNetwork() == true) {
      this.initializeMap();
    }
    else {
      this.showAlert("Internet is not available");
    }
  }

  initializeMap() {

    let locationOptions = { timeout: 20000, enableHighAccuracy: true };

    navigator.geolocation.getCurrentPosition(

      (position) => {

        let options = {
          center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
      },

      (error) => {
        console.log(error);
      }, locationOptions
    );
  }

5。in home.scss

    <ion-content>
    <!-- <button ion-button (click)="presentModal()">presentModal</button> -->
    <div id="map_canvas"></div>
</ion-content>

在您的src / index.html文件中（在cordova.js文件上方）包括：

就是这样

使用插件时，Google地图不会显示在Ionic上

4 个答案: