使用谷歌Stand库显示谷歌地图和离子的预定关键字的所有位置标记

我想在我的地图上为每个地方搜索结果显示一个标记,但是它不起作用。

---编辑---

我试着调试出我丢失了什么以及为什么标记没有出现,但我没办法弄清楚。即使答案是非常明显的,我可能无法看到它与我目前所拥有的。我已经编辑了一段代码,使用了函数和标记的选项来显示在创建的地图上,但这似乎不是为什么标记不能显示的答案。我不必在特定纬度和经度上创建标记,而是使用预定的搜索关键字搜索当前位置周围的区域,在这种情况下,关键词将是“McDONALDS”(这个搜索关键字正在被用于测试)。

HTML:

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id='map'>
  </div>
    <ion-fab bottom right id="locate">
      <button ion-fab
      (click)="locationClick()" color="white"><ion-icon ios="ios-locate-outline" md ="md-locate" color="primary"></ion-icon></button>
    </ion-fab>
    <ion-fab top left id="compass-fab">
      <button ion-fab mini (click)="compassClick()" color="white" id="compass"></button>
    </ion-fab>
    <ion-fab top right id="layers">
      <button ion-fab mini id="layers-button" color="white"><ion-icon name="SMAPP-layers"></ion-icon></button>
      <ion-fab-list side="bottom">
        <button ion-fab mini (click)="trafficClick()" id="traffic" color="white"></button>
        <button ion-fab mini (click)="transitClick()" id="transit" color="white"></button>
        <button ion-fab mini (click)="bicycleClick()" id="bicycle" color="white"></button>
      </ion-fab-list>
    </ion-fab>
</ion-content>

图:

   declare var google: any;
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class OfficeLocatorPage {
  @ViewChild(Navbar) navBar: Navbar;
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  mapOptions:any;
  infowindow: any;
  trafficEnabled = false;
  transitEnabled = false;
  bicycleEnabled = false;
  markers = [];
  trafficLayer = new google.maps.TrafficLayer();
  transitLayer = new google.maps.TransitLayer();
  bicycleLayer = new google.maps.BicyclingLayer();
  constructor(private navCtrl: NavController, private platform: Platform,
  private geolocation: Geolocation) {}

  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
      this.navCtrl.pop({animate: true, animation: "transition", direction: "left", duration: 300});
    };
 }
  ionViewDidEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  locationClick() {
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
    let myLocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
    this.map.setCenter(myLocation);
  });
}

  compassClick() {
    this.map.animateCamera({
      target: this.map.getCameraTarget(),
      tilt: 0,
      bearing: 0,
      duration: 1000
    });
  }

  trafficClick() {
    if (this.transitEnabled == true) {
      this.transitClick();
      this.trafficEnabled = true;
      this.trafficLayer.setMap(this.map);
    } else if (this.trafficEnabled == false) {
      this.trafficEnabled = true;
      this.trafficLayer.setMap(this.map);
    } else {
      this.trafficEnabled = false;
      this.trafficLayer.setMap(null);
    }
  }
  transitClick() {
    if (this.trafficEnabled == true) {
      this.trafficClick();
      this.transitEnabled = true;
      this.transitLayer.setMap(this.map);
    } else if (this.transitEnabled == false) {
      this.transitEnabled = true;
      this.transitLayer.setMap(this.map);
    } else {
      this.transitEnabled = false;
      this.transitLayer.setMap(null);
    }
  }
  bicycleClick() {
    this.bicycleEnabled = !this.bicycleEnabled;
    if (this.bicycleEnabled) {
      this.bicycleLayer.setMap(this.map);
    } else {
      this.bicycleLayer.setMap(null);
    }
  }


  loadMap() {
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
    let myLocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
    this.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: myLocation,
      disableDefaultUI: true
    });
  });
  let watch = this.geolocation.watchPosition();
  watch.subscribe((data) => {
    this.deleteMarkers();
    let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
    let image = {
      url: "assets/icon/blue_dot.png", // url
      scaledSize: new google.maps.Size(25, 33), // scaled size
      origin: new google.maps.Point(0,0), // origin
      anchor: new google.maps.Point(0, 0) // ancho
    };
    this.addMarker(updatelocation, image);
    this.setMapOnAll(this.map);
  });
    var request = {
      query: 'McDonalds',
      fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'],
    };
    let service = new google.maps.places.PlacesService(this.map);
    service.findPlaceFromQuery(request, callback);
    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (let i = 0; i < results.length; i++) {
          let placeLoc = results[i].geometry.location;
          this.addMarker(placeLoc, 'red');
        }
      }
      this.setMapOnAll(this.map);
    }
  }

  addMarker(location, image) {
  let marker = new google.maps.Marker({
    position: location,
    map: this.map,
    icon: image
  });
  this.markers.push(marker);
}

setMapOnAll(map) {
  for (var i = 0; i < this.markers.length; i++) {
    this.markers[i].setMap(map);
  }
}

clearMarkers() {
  this.setMapOnAll(null);
}

deleteMarkers() {
  this.clearMarkers();
  this.markers = [];
}
}