然后该属性在 Void Ionic 类型上不存在

Question

Having some trouble getting my markers to load when the button is clicked. For right now I am attempting to get locations of gyms near me. Right now, when the button is clicked, the map loads to my location but no markers display. I also get an error that then does not exist on type void' within my IonViewDidLoad

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

You need to use fat arrow functions as shown below.

1 place:

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

2nd place:

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