地理位置图，在Ionic2中白化

Question

我想在我的应用程序中创建一个地图，用标记显示我的位置。我正在使用离子 2，但得到了布兰科页面：http://prntscr.com/dx5czu

这是我在map中的代码.html：

<ion-header>
   <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Map</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
     <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
    </ion-buttons>  
     <div #map id="map"></div>  
</ion-content>

还有我在map.ts中的代码：

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
declare var google;
@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class Map {

 @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(public navCtrl: NavController) {
  }
  ionViewDidLoad(){
    this.loadMap();
  }
  loadMap(){
    Geolocation.getCurrentPosition().then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    }, (err) => {
      console.log(err);
    });
  }
  addMarker(){
  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
  });
  let content = "<h4>Information!</h4>";          
  this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
  let infoWindow = new google.maps.InfoWindow({
    content: content
  });
  google.maps.event.addListener(marker, 'click', () => {
    infoWindow.open(this.map, marker);
  });
}
}

没有给出任何错误。

Answer 1

这个插件只是设备手机中的单词

Answer 2

问题是你的代码是完美的，除了以下几行

ionViewDidLoad（）{ this.loadMap（）; }

ionViewDidLoad 是旧版本的 ionic。要使其工作，您可以推送this.loadMap（）;在构造函数中。所以新代码将看起来像

constructor(public navCtrl: NavController) {
    this.loadMap();
}

有关更多信息，您可以访问我的 github 存储库 https://github.com/darpanpathak/LocationTrackerApp