如何使用角度Google Maps使用PlacesService Google Maps API

时间:2018-10-03 12:06:33

标签: angular google-maps

我有以下代码来加载Angular Google Maps(AGM)。我需要使用PlacesService API将地图上的标记与地点一起加载。

<agm-map 
  (mapReady)="mapReady($event)" 
  (mapClick)="close_window()" 
  [latitude]="lat" 
  [longitude]="lng" 
  [zoom]="zoom">
  <agm-marker 
    *ngFor="let m of mapArrayList; let i = index"
    (markerClick)="clickedMarker(infowindow);getDistanceMatrix(m.geometry.location.lat,m.geometry.location.lng)"
    [latitude]="m.geometry.location.lat"
    [longitude]="m.geometry.location.lng">
  </agm-marker>
</agm-map>

在我的组件类中:

mapReady($event: any) {
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: {
      lat: 29.9751765,
      lng: 31.3087244
    },
    radius: 5000,
    type: ['atm']
  }, (results, status) => {

    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        this.mapArrayList = results;
        //   this.createMarker(results[i]);
      }
    }
  });
  var myplace = {
    lat: 29.9751765,
    lng: 31.3087244
  };
}

我能够使用JavaScript实现相同的目标。但是我想使用agm实现以下代码。

在组件模板中:

<div #map id="map"></div>

在组件类中

ngOnInit() {

  map = new google.maps.Map(this.mapElement.nativeElement, {
    center: {
      lat: 29.9751765,
      lng: 31.3087244
    },
    zoom: 13
  });
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: {
      lat: 29.9751765,
      lng: 31.3087244
    },
    radius: 5000,
    type: ['atm']
  }, (results, status) => {

    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        this.createMarker(results[i]);
      }
    }
  });
  var myplace = {
    lat: 29.9751765,
    lng: 31.3087244
  };
}

0 个答案:

没有答案