如何在 ionic 2 应用程序中自动更新谷歌地图上的当前位置

Posted 2023-02-23

【中文标题】如何在 ionic 2 应用程序中自动更新谷歌地图上的当前位置

【英文标题】：How to auto update current location on google map in ionic 2 application

【发布时间】：2016-11-28 08:05:15

【问题描述】：

我是 ionic 2 native 的初学者。我使用本教程 (http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/) 创建了一个简单的位置跟踪应用程序，我想在用户旅行时自动更新用户当前位置。 我搜索了教程或任何资源来了解这一点。但我找不到任何东西。如果有人知道ioinc 2 中有关自动更新用户位置的信息，请告诉我该怎么做或给我一个链接。

这是我的代码

export class MapPage 

  x: number = 0;
  y: number = 0;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

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

  loadMap() 
    Geolocation.getCurrentPosition().then((position) => 

      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      console.log(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);

      console.log(this.map);

    , (err) => 
      console.log(err);
    );
  

  addInfoWindow(marker, content) 

    let infoWindow = new google.maps.InfoWindow(
      content: content
    );

    google.maps.event.addListener(marker, 'click', () => 
      infoWindow.open(this.map, marker);
    );

  

  showMyLocation() 

    Geolocation.getCurrentPosition().then((position) => 

      let latLng = new google.maps.LatLng(this.x, this.y);

      let marker = new google.maps.Marker(
        map: this.map,
        icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
          new google.maps.Size(22, 22),
          new google.maps.Point(0, 18),
          new google.maps.Point(11, 11)),
        position: latLng
      );

      let content = "<h4>You are here</h4>";
      this.addInfoWindow(marker, content);

    , (err) => 
      console.log(err);
    );
  

这是 html 文件

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
    <ion-input type=number style="border: 1px solid black" [(ngModel)]="x"></ion-input>
    <ion-input type=number style="border: 1px solid black" [(ngModel)]="y"></ion-input>
    <ion-buttons end>
      <button ion-button (click)="showMyLocation()"><ion-icon name="add"></ion-icon>Show my location</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
</ion-content>

谢谢

【问题讨论】：

@Dilanka Rathnayake 先生，您能否发布您的solution，因为我遇到了类似的问题。我会对我很有帮助。

这是我的电子邮件 ID：[e-mail]

我不明白您需要什么，解决方案在第一个答案中。那么你的问题是什么。请描述一下。

您需要使用 watchPostion 而不是 Geolocation.getCurrentPosition()。然后，您的应用会在位置发生变化时自动查看并更新您的位置

我已经给了全班。只需将我的 Geolocation.getCurrentPosition() 替换为 Geolocation.watchPosition()，

【参考方案1】：

只需使用方法watchPosition 而不是getCurrentPosition ：

 Geolocation.watchPosition().subscribe((position) => 
  this.x = position.coords.longitude;
  this.y = position.coords.latitude;

  let latLng = new google.maps.LatLng(this.x, this.y);

  let marker = new google.maps.Marker(
    map: this.map,
    icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
      new google.maps.Size(22, 22),
      new google.maps.Point(0, 18),
      new google.maps.Point(11, 11)),
    position: latLng
  );

  let content = "<h4>You are here</h4>";
  this.addInfoWindow(marker, content);

, (err) => 
  console.log(err);
);

查看此处https://ionicframework.com/docs/v2/native/geolocation/ 和此处https://github.com/apache/cordova-plugin-geolocation#navigatorgeolocationwatchposition 了解更多详情。

【讨论】：

@e666 先生，我已经尝试过 aove 但最初加载后，当前标记在地图中不可见？