初始化离子Google地图中的标记和Infowindow

Question

我再次遇到了我的克星，添加了google标记并在信息窗口中添加了google标记和设置内容。在这段代码中，我已经完成了地理定位，并且从我当前的位置我想要在附近的地方执行搜索。我搜索的地方将从我已经实施的Ionic列表页面中检索。从我在名单上选择的任何东西消防站，我想我的代码执行地方搜索，结果在我的地图上显示为标记，从谷歌图书馆infowindow内容。我的问题是标记不在我的地图上，你可能猜测，这意味着没有信息窗口。如果你能给我提供一些方向。我正在使用Ionic进行预成型。

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){ 

} 
} 

Answer 1

我意识到infowindow中的“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); 
})