地理位置图，Ionic2中的blanc

Posted 2023-02-23

【中文标题】地理位置图，Ionic2中的blanc

【英文标题】：Geolocation map, blanc in Ionic2

【发布时间】：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的一些问题

记得添加样式，否则你只会看到黑页

【参考方案1】：

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

【参考方案2】：

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

ionViewDidLoad() this.loadMap();

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

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

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