地理位置图，Ionic2中的blanc答案

【问题标题】：Geolocation map, blanc in Ionic2地理位置图，Ionic2中的blanc
【发布时间】：2017-01-18 11:19:02
【问题描述】：

我想在我的应用程序中创建一张地图，用标记显示我的位置。我正在使用 ionic 2 但得到了 blanco 页面： 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);
  });

}

}

没有给出错误。

【问题讨论】：

您是否在某些设备上运行？插件不适用于带有服务的浏览器
哦不，在 Firefox 中完成的，将在我的 android 设备上尝试
cordova 插件只能在模拟器/设备中使用，或者您可以将浏览器添加为平台（不确定在这种情况下是否所有插件都可以使用）
添加了android，现在修复了JDK的一些问题
记得添加样式，否则你只会看到黑页

标签： ionic-framework geolocation ionic2

【解决方案1】：

这个插件只是在移动设备中使用

【讨论】：

【解决方案2】：

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

ionViewDidLoad(){ this.loadMap(); }

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

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

更多信息可以访问我的github仓库https://github.com/darpanpathak/LocationTrackerApp

【讨论】：