该属性然后不存在类型虚空离子

Question

点击按钮时，我的标记加载有些麻烦。现在我正试图让我附近的健身房的位置。现在，单击按钮时，地图会加载到我的位置，但不会显示标记。我也得到一个错误 '是 '那么我IonViewDidLoad内' 不会对类型为void存在'

gyms.html

<ion-header> 

    <ion-navbar> 
    <ion-title>Gyms Nearby</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <ion-buttons start> 
    <button ion-button round full (click)="gymMap()">Find Gyms Near Me</button> 
    </ion-buttons> 

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

    <div id="resultList"> 
     <ion-list> 

     <ion-card> 
      <ion-item ng-if = "places" > 
      Places Found: {{places?.length}} 
      </ion-item> 
     </ion-card> 

     <ion-card id="result"> </ion-card> 
      <button ion-item *ngFor = "let place of places; let i = index"> 
      {{place.name}} + <br/> {{place.vicinity}} <br /> Average Rating: {{place.rating}} 
      </button> 
     </ion-list> 
    </div> 

</ion-content> 

gyms.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Geolocation } from '@ionic-native/geolocation'; 

declare var google; 


@Component({ 
    selector: 'page-gyms', 
    templateUrl: 'gyms.html', 
}) 
export class GymsPage { 
    map: any; 
    places: Array<any>; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation:Geolocation) { 
    } 

    ionViewDidLoad() { 
    this.gymMap().then((results : Array <any>)=>{ 
     for (let i=0; i< results.length; i++){ 
     this.createMarker(results[i]); 
     } 
     this.places = results; 
    }, (status)=>console.log(status)); 
    } 

    gymMap(){ 
    this.geolocation.getCurrentPosition().then((position) =>{ 
     let currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     let mapOptions = { 
     zoom: 12, 
     center: currentLocation, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     this.map = new google.maps.Map(document.getElementById("map"),mapOptions); 

     let service = new google.maps.places.PlacesService(this.map); 
     let request = { 
     location : currentLocation, 
     radius : '10000', 
     rankBy : google.maps.places.DISTANCE, 
     type: ['gym'], 
     }; 

     return new Promise((resolve,reject) =>{ 
     service.nearbySearch(request,(results,status)=>{ 
      if (status == google.maps.places.PlacesServiceStatus.OK){ 
      resolve(results); 
      }else{ 
      reject(results); 
      } 
     }); 
     }); 

    }); 

    }//end of gymMap 

    createMarker(place){ 
    let marker = new google.maps.Marker({ 
     map: this.map, 
     animation: google.maps.Animation.DROP, 
     position: place.geometry.location, 
     title: place.name, 
    }); 

    google.maps.event.addListener(marker, 'click',()=>{ 
     let infowindow = new google.maps.InfoWindow({ 
     content: place.name 
     }); 
     infowindow.open(this.map,marker); 
    }) 
    }//end of createMarker 


}//end of GymsPage 

Answer 1

您需要使用fat arrow功能如下所示。

1地点：

return new Promise((resolve,reject)=>{ 
     service.nearbySearch(request, (results,status)=>{ 
      if (status == google.maps.places.PlacesServiceStatus.OK){ 
      resolve(results); 
      }else{ 
      reject(results); 
      } 
     }); 
     }); 

第二名：

google.maps.event.addListener(marker, 'click',()=>{ 
     let infowindow = new google.maps.InfoWindow({ 
     content: place.name 
     }); 
     infowindow.open(this.map,marker); 
    })