Javascript 在爱奥尼亚谷歌地图中初始化标记和信息窗口

我又一次遇到了我的敌人，添加了谷歌标记，并在和信息窗口中设置了内容。在这段代码中，我已经完成了地理定位，从我当前的位置，我想在附近的地方执行搜索。我搜索的地方将从我已经实现的离子列表页面中检索。从我在列表中选择的任何一个地方（比如消防站），我希望我的代码能够执行一次地点搜索，搜索结果会以标记的形式出现在我的地图上，其中包含来自谷歌图书馆的infowindow内容。我的问题是这些标记不在我的地图上，你可能会猜到，这意味着没有信息窗口。如果你能给我一些指导的话。我正在用爱奥尼亚的方式进行这项工作

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DirectionPage} from '../direction/direction';

/**
 * Generated class for the PlacesPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

 declare var google;
 this.marker = [];

@Component({
  selector: 'page-places',
  templateUrl: 'places.html',
})
export class PlacesPage {

  places: Array<any>;
  map: any;
  currentLocation: any;
  latitude: Number;
  longitude: Number;
  keyword: String;
  searchType: String;
  distance: Number; 

 constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.latitude = navParams.get('latitude');
    this.longitude = navParams.get('longitude');
    this.keyword = navParams.get('keyword');
    this.searchType = navParams.get('type');
    this.distance = navParams.get('distance');
  }

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

  queryPlaces(){
    this.currentLocation = new google.maps.LatLng(this.latitude,this.longitude);
let mapOptions = {
  zoom: 10,
  center: this.currentLocation,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

let service = new google.maps.places.PlacesService("service");

let request = {
  location : this.currentLocation,
  radius: this.distance,
  types: [this.searchType],
  rankBy: google.maps.places.DISTANCE      
};

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

 } 

 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', function(){
  let infowindow = new google.maps.infowindow({
    content : this.place
    });
    infowindow.open(this.map,marker);    
  });
}

goToDirectionPage(index){

} 
}

从'@angular/core'导入{Component}；
从“离子角度”导入{NavController，NavParams}；
从“../direction/direction”导入{DirectionPage}；
/**
*为PlacesPage页面生成的类。
*
*看https://ionicframework.com/docs/components/#navigation 有关
*爱奥尼亚网页和导航。
*/
谷歌公司；
this.marker=[]；
@组成部分({
选择器：“页面位置”，
templateUrl:'places.html'，
})
出口类货位{
地点：阵列；
地图：任何；
当前位置：任何；
纬度：数字；
经度：数字；
关键词：字符串；
搜索类型：字符串；
距离：数字；
构造函数（公共navCtrl:NavController，公共navParams:navParams）{
this.latitude=navParams.get（'latitude'）；
this.longitude=navParams.get（'longitude'）；
this.keyword=navParams.get（'keyword'）；
this.searchType=navParams.get（'type'）；
this.distance=navParams.get（'distance'）；
}
ionViewDidLoad（）{
this.queryPlaces（）.then（（结果：数组）=>{
for（设i=0；iconsole.log（状态））；
}
queryPlaces（）{
this.currentLocation=new google.maps.LatLng（this.latitude，this.longitude）；
让mapOptions={
缩放：10，
中心：此.currentLocation，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
this.map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
let service=new google.maps.places.PlacesService（“服务”）；
让请求={
位置：this.currentLocation，
半径：这个距离，
类型：[this.searchType]，
rankBy:google.maps.places.DISTANCE
};
返回新承诺（（解决、拒绝）=>{
service.nearbySearch（请求、功能（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
决心（结果）；
}否则{
拒绝（结果）；
}
});
});    
} 
创建标记（位置）{
让marker=new google.maps.marker({
map:this.map，
动画：google.maps.animation.DROP，
位置：place.geometry.location，
标题：place.name，
});
google.maps.event.addListener（标记'click'，函数（）{
让infowindow=new google.maps.infowindow({
内容：这个地方
});
infowindow.open（this.map，marker）；
});
}
goToDirectionPage（索引）{
} 
}

我意识到信息窗口中的“I”需要大写。此外，place.geometry.location获取标记对象的位置

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', function(){
  let infowindow = new google.maps.InfoWindow({
    content: place.name 
  });
  infowindow.open(this.map,marker);
})

---

这是你问题的答案吗？如果是这样，您应该添加一个简短的解释，说明它是如何工作的，以及它为什么解决了问题。如果您试图在问题中添加更多代码，则应编辑问题，而不是发布答案。您可以使用Ionic 4实现更新此答案。此实现现在已被弃用