使用间隔移动标记

时间:2019-01-23 17:26:08

标签: angular google-maps-markers setinterval

我正在制作一个“简单”程序,该程序将模拟汽车追踪器。 我有后端(MySQL + Spring),但没有连接器。但这没关系。

我需要知道如何使用间隔移动标记。 例如:我的标记将每1秒移动“纬度+ 0.00005”。 我将在哪里放置将增加标记范围的函数,并将每秒调用一次。

这是初始化地图并放置我要移动的标记的代码

map.component.ts

import { Component, OnInit } from '@angular/core';
import { MouseEvent } from '@agm/core';
import { interval } from 'rxjs';
import {timeInterval} from 'rxjs/operators';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  constructor() {
  }

  latitude = 52.2330653;
  longitude = 20.9211119;
  locationChosen = false;

  mapClicked($event: MouseEvent){
    this.markers.push({
      lat: $event.coords.lat + 0.0000005,
      lng: $event.coords.lng
    });
  }


  markers: marker[] = [
    {
      lat: 52.2330600,
      lng: 20.92111,
      label: 'WE228GL',
    }
  ]



  onChoseLocation(event){
    this.latitude = event.coords.lat;
    this.longitude = event.coords.lng;
    this.locationChosen = true;
  }

  ngOnInit() {
  }

}
interface marker{
  lat: number;
  lng: number;
  label?: string;
}

和html文件

<agm-map [latitude]="latitude" [longitude]="longitude" (mapClick)="onChoseLocation($event)">

  <agm-marker
    *ngFor="let m of markers; let i = index"
    (markerClick)="clickedMarker(m.label, i)"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="m.label">


  </agm-marker>
</agm-map>

我被困住了。请帮忙。

0 个答案:

没有答案