Angular 5 谷歌地图：仅显示 # 公里半径内的标记

Question

我目前正在我的应用中制作地图。我为此使用了惊人的 Angular agm 包。

目标是显示带有标记的地图。这些标记来自数据库并包含纬度和经度值。我有数百个标记，我想过滤它们。我只想显示距离我所在位置 5 公里以内的标记。我该怎么做？我浏览了包的 API 文档，但没有看到解决方案。谁能帮帮我？

Map.component.html

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map
        [latitude]="lat"
        [longitude]="lng"
        [fullscreenControl]="true"
        [zoom]="13"
>

    <agm-marker
            *ngFor="let marker of markers"
            [latitude]="marker.latitude"
            [longitude]="marker.longitude"
            (markerClick)="doSomething($event)"

            >
        <agm-info-window [disableAutoPan]="true">
            <a routerLink="/">Go there</a>
        </agm-info-window>
    </agm-marker>
</agm-map>

ma​​p.component.ts

export class FindLocalsComponent implements OnInit{

    lat:number;
    lng: number;
    markers = [];

    constructor(private findLocalsService: FindLocalsService){}

    ngOnInit(){
        let token = localStorage.getItem('token');

        this.findLocalsService.getLocations(token)
            .subscribe((data) => {
                console.log(data.obj);
                this.lat = data.obj.myLocation[0].latitude;
                this.lng = data.obj.myLocation[0].longitude;
                this.markers = data.obj.locationCollection;
            })
    }
}

Answer 1

您正在寻找一个 google.maps.geometry.spherical.computeDistanceBetween 函数，它返回两点之间的距离（以米为单位）

改动列表：

a) 导入geometry 库：

AgmCoreModule.forRoot({
  apiKey: '--key goes here--',
  libraries: ['geometry']
})

b) 要使用google.maps.geometry.spherical.computeDistanceBetween 功能，需要先加载Google Maps API。就此而言，MapsAPILoader provider 的使用如下所示

c) 按距离执行标记过滤

ngOnInit() {
    this.markers = this.getLocations(); //original list of markers data

    this.mapsAPILoader.load().then(() => {
      const center = new google.maps.LatLng(this.lat, this.lng);
      //markers located within 50 km distance from center are included
      this.filteredMarkers = this.markers.filter(m => {
        const markerLoc = new google.maps.LatLng(m.latitude, m.longitude);
        const  distanceInKm = google.maps.geometry.spherical.computeDistanceBetween(markerLoc, center) / 1000;
        if (distanceInKm < 50.0) {
          return m;
        }
      });
    });
  }

Demo

Answer 2

在 Angular 中，通过使用 @agm 库，我们可以轻松做到这一点。

创建一个可拖动且可调整大小的圆用作半径：

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">


    <ng-container *ngFor="let m of markers; let i = index">

        <agm-marker (markerClick)="clickedMarker(m.label, i)" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [iconUrl]="m.icon" *ngIf="m.isShown">

            <agm-info-window>
                <div>{{m.content}}</div>
            </agm-info-window>

        </agm-marker>

    </ng-container>

    <agm-circle [latitude]="radiusLat" [longitude]="radiusLong" [radius]="radius" [fillColor]="'red'"
        [circleDraggable]="true" [editable]="false" (dragEnd)="radiusDragEnd($event)"
        (radiusChange)="event('radiusChange',$event)">
    </agm-circle>

</agm-map>

<div>Latitude: {{latitude}}</div>
<div>Longitude: {{longitude}}</div>

我们需要检查半径和每个标记之间的距离，以便在拖动时显示/隐藏它。

  radiusDragEnd($event: any) {
    console.log($event);
    this.radiusLat = $event.coords.lat;
    this.radiusLong = $event.coords.lng;
    this.showHideMarkers();
  }

  event(type,$event) {
    console.log(type,$event);
    this.radius = $event;
    this.showHideMarkers();
  }

  showHideMarkers(){
    Object.values(this.markers).forEach(value => {
      value.isShown = this.getDistanceBetween(value.lat,value.lng,this.radiusLat,this.radiusLong);
    });
  }

  getDistanceBetween(lat1,long1,lat2,long2){
    var from = new google.maps.LatLng(lat1,long1);
    var to = new google.maps.LatLng(lat2,long2);

    if(google.maps.geometry.spherical.computeDistanceBetween(from,to) <= this.radius){    
      console.log('Radius',this.radius);
      console.log('Distance Between',google.maps.geometry.spherical.computeDistanceBetween(
        from,to
      ));
      return true;
    }else{
      return false;
    }
  }

查看此链接以获取教程： 来源link

你可以在这里找到演示： 演示link