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 { 
 

 
}

添加相关的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

嗨，我试过你的问题，但仍然没有出现地图。 –

之后，我按照您发送的链接的文档，我仍然没有地图出现。我想我的问题来自我的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>

Ionic 3 Google Map不显示在Android + IOS

相关推荐