Ionic 3 Google Map不顯示在Android + IOS

我使用Ionic 3版本，並嘗試將頁面添加到我的應用程序中，以顯示帶有標記的地圖。我已經爲我的應用使用Google地圖ID進行自動填充（Google地點...）。我去過Google API，並且將Map Embed，Javascript等添加到了我的API密鑰中。但頁面出現帶有「谷歌」在底部，並顯示按鈕」，但地圖是空見附件......Ionic 3 Google Map不顯示在Android + IOS

安裝科爾多瓦和離子本地插件：

$離子科爾多瓦插件添加https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps - 變量API_KEY_FOR_ANDROID =「AIzaSyB6mEnxH4vC+++++++++ 9wnXXNNmK2co」 - 變量API_KEY_FOR_IOS =「AIzaSyB6mEnxH4v ++++++++++++++ wnXXNNmK2co」 $ npm install - save @ ionic-native/google-maps

Home.ts：

import { NavController } from 'ionic-angular'; 
import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { GoogleMaps, CameraPosition, GoogleMapsEvent, GoogleMap, MarkerOptions, Marker } from "@ionic-native/google-maps"; 

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

export class HomePage { 

    @ViewChild('map') mapElement: ElementRef; 
    map: any; 
    constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) { 

    } 
    ngAfterViewInit() { 
this.loadMap(); 
} 

loadMap() { 
// make sure to create following structure in your view.html file 
// and add a height (for example 100%) to it, else the map won't be visible 
// <ion-content> 
// <div #map id="map" style="height:100%;"></div> 
// </ion-content> 

// create a new map by passing HTMLElement 
let element: HTMLElement = document.getElementById('map'); 

let map: GoogleMap = this.googleMaps.create(element); 

// listen to MAP_READY event 
// You must wait for this event to fire before adding something to the map or modifying it in anyway 
map.one(GoogleMapsEvent.MAP_READY).then(
    () => { 
    console.log('Map is ready!'); 
    // Now you can add elements to the map like the marker 
    } 
); 

// create CameraPosition 
let position: CameraPosition = { 
    target: { 
    lat: 43.0741904, 
    lng: -89.3809802 
    }, 
    zoom: 18, 
    tilt: 30 
}; 

// move the map's camera to position 
} 
}

home.html的

Home.html : 
 
<ion-header> 
 
    <ion-navbar> 
 
    <ion-title> 
 
     Map 
 
    </ion-title> 
 
    <ion-buttons end> 
 
     <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button> 
 
    </ion-buttons> 
 
    </ion-navbar> 
 
</ion-header> 
 
    
 
<ion-content> 
 
<div #map id="map" style="height:100%;"></div> 
 
</ion-content>

Home.scss

page-home { 
 

 
}

來源

2017-07-25 John Belay

添加相關的HTML和CSS（如果有的話）。 –

我編輯了我的aks添加了html和css。 –

不要使用ngAfterViewInit。您必須等待platform.ready()

// Wait the native plugin is ready. 
platform.ready().then(() => { 
    this.loadMap(); 
});

的完整代碼https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md

回購：https://github.com/mapsplugin/ionic-google-maps

目前官方文檔頁面是錯誤的。我發出了拉請求，但現在正在等待。 https://github.com/ionic-team/ionic-native/pull/1834

來源

2017-07-25 20:16:31 wf9a5m75

嗨，我試過你的問題，但仍然沒有出現地圖。 –

之後，我按照您發送的鏈接的文檔，我仍然沒有地圖出現。我想我的問題來自我的API。您能否指示我如何配置API以使Google自動完成+使之成爲地圖。 –

我在最新的代碼中發現了一個錯誤。請嘗試重新安裝插件或將相機選項指定爲第二個參數。 https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Map/getMap/README.md#create-a-map-with-initialize-options – wf9a5m75

請嘗試以下代碼，並確保您使用的是正確的API密鑰，下面寫在你的.ts文件中的代碼：

ionViewDidLoad() { 
    this.loadMap(); 
    } 
    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!'); 

      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'); 
        }); 
       }); 

      }); 
     }

在您的.html文件定義地圖像下面

<ion-content> 
    <div id="map_canvas" style="height: 100%;"></div> 
</ion-content>

來源

2017-12-04 06:44:18

Ionic 3 Google Map不顯示在Android + IOS

回答

相關問題