TypeScript core.MapsAPILoader类代码示例

 constructor(
   private mapsAPILoader: MapsAPILoader,
   private searchService: SearchService
 ) {
   this.mapsAPILoader.load().then(() => {
     this.geocoder = new google.maps.Geocoder();
   });
 }

  ngOnInit() {
    // TODO: style icon inside autocomplete? https://developers.google.com/maps/documentation/javascript/places-autocomplete
    this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(this.originInput.nativeElement, {
        types: ['address']
      });
      autocomplete.addListener('place_changed', () => {
        // get the place result
        const place: google.maps.places.PlaceResult = autocomplete.getPlace();

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

        // set name, latitude, longitude
        const address = this.originInput.nativeElement.value;
        const coords = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng()
        };
        this.searchService.originNewLocation(address, coords);
        // this.searchService.originChange(address, coords);
        this.searchService.updateInputFocus();
      });
    });
  }

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

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

        // set name, latitude, longitude
        const address = this.destinationInput.nativeElement.value;
        const coords = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng()
        };
        this.searchService.destinationNewLocation(address, coords);
        this.searchService.updateInputFocus();
      });
    });
  }

      return Observable.create(observer => {
        try {
            //at this point the variable google may be still undefined (google maps scripts still loading)
            //so load all the scripts, then...
            this.__loader.load().then(() => {
                let geocoder = new google.maps.Geocoder();
                geocoder.geocode({ address }, (results, status) => {

                    if (status === google.maps.GeocoderStatus.OK) {
                        const place = results[0].geometry.location;
                        observer.next(place);
                        observer.complete();
                    } else {
                        console.error('Error - ', results, ' & Status - ', status);
                        if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                            observer.error('Address not found!');
                        }else {
                            observer.error(status);
                        }
                        
                        observer.complete();
                    }
                });
            });
        } catch (error) {
            observer.error('error getGeocoding' + error);
            observer.complete();
        }

    });

  ngAfterViewInit() {
    this.mapsAPILoader.load().then(() => {

      this.apiWrapper.getNativeMap().then((m) => {
        this.mapService.initializeMapFromMapExtension(m);

      }, err => {
        console.log('Error', err );
      });
    });

    this.geolocationService.getCurrentPosition();
  }

  ngOnInit() {
        //change the title back to normal 
        document.getElementById('title').innerHTML = 'Google Bytes';

    // functionality to allow for autocomplete
    this.mapsAPILoader.load().then( () => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {
        types:[]});
      autocomplete.addListener('place_changed', ()=>{
        this.ngZone.run(()=>{
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();
          //takes the lat and long from the auto complete and inserts them into the globals
          this.lat = place.geometry.location.lat();
          this.long = place.geometry.location.lng();
        })
      })
    });
  }

  ngOnInit() {
    this.searchElementRef.nativeElement.value = this.address || '';

    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(
        this.searchElementRef.nativeElement,
        {
          types: ['address']
        }
      );
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();
          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }
          // this.address.search = this.searchElementRef.nativeElement.value;
          // place.address_components.forEach((address_component, index) => {
          //   console.log(address_component);
          //   if (address_component.types.includes('locality'))
          //     // this.addressForm.setValue({ city: address_component.long_name });
          //     this.address.city = address_component.long_name;
          //   else if (
          //     address_component.types.includes('administrative_area_level_1')
          //   )
          //     // this.addressForm.setValue({ state: address_component.long_name });
          //     this.address.state = address_component.long_name;
          //   else if (address_component.types.includes('country'))
          //     // this.addressForm.setValue({
          //     //   country: address_component.long_name
          //     // });
          //     this.address.country = address_component.long_name;
          // });
          this.addressChanged.emit(place);
        });
      });
    });
  }