在 Ionic Google 地图中初始化标记和信息窗口

Question

我又遇到了我的克星，添加google标记并设置内容和信息-window。在这段代码中，我已经完成了地理定位，并且我想从我当前的位置对附近的地方进行搜索。我搜索的地方将从我已经实现的 Ionic 列表页面中检索。从我在列表前选择的任何内容。消防站，我希望我的代码执行地点搜索，结果作为标记出现在我的地图上，信息 window 内容来自 google 个图书馆。我的问题是标记不在我的地图上，您可能会猜到，这意味着没有信息 window。如果你能给我一些方向。我在 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);
})

在 Ionic Google 地图中初始化标记和信息窗口

Initializing Markers and Infowindow in Ionic Google Maps

javascript

google-maps

ionic-framework

google-maps-api-3

google-places