1
ボタンをクリックしたときにマーカーが読み込まれるのに問題があります。今は私の近くでジムの場所を取得しようとしています。今、ボタンをクリックすると、マップは自分の位置にロードされますが、マーカーは表示されません。私はまた、あなたがfat arrow
機能を使用する必要が私のIonViewDidLoadプロパティがVoid Ionicに存在しません
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
私は、変更を行ったが、 "それから" エラーがまだoccureingされ、今this.gymMapは未定義@sampath –
できることです最新のコードを表示しますか?デバイスでテストしていますか?ネイティブプラグインを使用していることを願っています。 – Sampath
更新されたコードが追加されました。私はネイティブプラグインを使用しています –