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>

map.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 库，我们可以轻松地做到这一点

来源link

演示link

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

<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;
    }
  }

... ...

查看教程链接以获取完整代码

Angular 5谷歌地图：仅显示半径为#km

2 个答案: