Question

我已经从http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/实施了自动填充地点功能以下是我的代码。当我搜索任何位置时，它会被列出，但是当我选择该位置时，我如何在地图视图中标记该位置。我添加了列出地点的代码和图像。当我在任何特定地点选择时，地图中的标记不会移动到该特定位置。我该怎么办？任何建议都会非常有用。

<div class="form-group">
    <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
  </div>
<agm-map style="height: 600px" [latitude]="1.372611" [longitude]="103.848076">
    <agm-marker  *ngFor="let m of mapArrayList; let i = index" 
      [latitude]="m.latitude"
      [longitude]="m.longitude"
     >
   </agm-marker>
</agm-map>

[![import { Component, Input, Output, EventEmitter, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { FormsModule, FormControl  } from '@angular/forms';
/// <reference path="<relevant path>/node_modules/@types/googlemaps/index.d.ts" />
import { AgmCoreModule, MapsAPILoader } from '@agm/core';
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
import {} from 'googlemaps';
declare var google: any;

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: \['./google-map.component.sass'\]
})
@NgModule({
imports: \[AgmCoreModule.forRoot({
               apiKey: 'AIzaSyC0bwgoL0KaR4YBM2aN0OmhMF6t7toO7BA'
        }),
        AgmJsMarkerClustererModule\],
})
export class GoogleMapComponent implements OnInit {
  @Input() facilityListArray: any;
  lat: number;
  lng: number;
  public searchControl: FormControl;
  public zoom: number;

  mapArrayList: any = \[\];
  @ViewChild('search')
  public searchElementRef: ElementRef;
  constructor(private router: Router,
    private route: ActivatedRoute,  private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone) { }

  ngOnInit() {
    this.lat = 1.372611;
    this.lng = 103.848076;
    this.mapArrayList = this.facilityListArray;
    console.log(this.mapArrayList);
     // set google maps defaults
     this.zoom = 4;
     this.lat = 39.8282;
     this.lng = -98.5795;

     // create search FormControl
     this.searchControl = new FormControl();

     // set current position
     this.setCurrentPosition();

     // load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: \['address'\]
      });
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          // get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();

          // verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          // set latitude, longitude and zoom
          this.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
  }
  autoCompleteCallback1(selectedData: any) {
    // do any necessery stuff.
}

  private setCurrentPosition() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
        this.zoom = 12;
      });
    }
  }
}][1]][1]

如果使用角度4单击自动填充位置中的搜索位置，如何获取谷歌地图中的位置

0 个答案: