使用 FAB 启动导航器
launch navigator with a FAB
看到这个的人你好,我是 typescript 开发的初学者,所以我尽我最大的努力,我正在尝试使用 FAB 启动导航器(如 waze、gmap 或其他...)。这是我在 TS 中的代码:
ngOnInit() {
this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
lieu.adresse = adresse;
});
});
this.lieux = lieux;
});
}
ionViewDidEnter() {
this.lieuId = this.route.snapshot.params['id'];
if (this.lieuId) {
this.loadLieuWithMap();
}
console.log('ionViewDidEnter');
}
async loadLieu() {
this.lieuService.getLieu(this.lieuId).subscribe(res => {
this.lieu = res;
this.concertService.getUpcomingConcertsForLieuById(this.lieuId)
.subscribe(interne_next_concert => this.lieu.prochaine_concerts = this.getConcertsReadyToExpose( interne_next_concert));
this.concertService.getPreviousConcertsForLieuById(this.lieuId)
.subscribe(interne_previous_concert => this.lieu.concerts_passes = this.getConcertsReadyToExpose( interne_previous_concert));
this.adresseService.getAdresse(res.adresse.id).subscribe(resadd => {
this.lieu.adresse = resadd;
console.log(this.lieu);
});
});
}
async loadLieuWithMap() {
this.lieuService.getLieu(this.lieuId).subscribe(lieu => {
// loading address
this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
this.adresse = adresse;
this.map = L.map('mapIdDetail').setView([adresse.latitude, adresse.longitude], 13) ;
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright',
}).addTo(this.map);
// get full address
const adresseComp = adresse.numero + ' ' + adresse.rue + '<br>' + adresse.ville + ' ' + adresse.cp;
// popup Content
const popupContent = '<h2>' + lieu.nom + '</a></h2></br>' + adresseComp + '</div>';
L.marker([adresse.latitude, adresse.longitude]).addTo(this.map)
.bindPopup(popupContent);
});
this.lieu = lieu;
});
}
LaunchRoute() {
console.log('ADRESSE:', );
this.launchNavigator.navigate()
.then(
success => console.log('Launched navigator'),
error => console.log('Error launching navigator', error)
);
}
和 HTML 部分是:
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button color="primary" (click)="LaunchRoute()" >J'y vais</ion-fab-button>
</ion-fab>
问题是如果不将信息(号码、街道、城市...等)放在按钮中间,我就无法发送它,如下所示:
<ion-fab-button color="primary" (click)="LaunchRoute()" >{{Lieu.nom}}</ion-fab-button>
它不是很好,但是当我这样做时它当然工作得很好。
所以我认为我的 LaunchRoute 不好,也许我错过了一些我不知道的东西。
抱歉我的英语写作能力(以及部分法语代码)。
[编辑]
嗯,在咨询了其他几个论坛后终于解封了,终于找到了解决办法。
在我的 TS 文件中:
LaunchRoute(adresse) {
console.log('ADRESSE:', adresse);
this.launchNavigator.navigate(adresse)
.then(
success => console.log('Launched navigator'),
error => console.log('Error launching navigator', adresse, error)
);
}
并在 html 文件中:
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button vertical="bottom" horizontal="end" color="primary" (click)="LaunchRoute([ lieu.nom, adresse.numero, adresse.rue, adresse.ville])" ><img src="../../assets/img/navto.png" /></ion-fab-button>
</ion-fab>
看到这个的人你好,我是 typescript 开发的初学者,所以我尽我最大的努力,我正在尝试使用 FAB 启动导航器(如 waze、gmap 或其他...)。这是我在 TS 中的代码:
ngOnInit() {
this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
lieu.adresse = adresse;
});
});
this.lieux = lieux;
});
}
ionViewDidEnter() {
this.lieuId = this.route.snapshot.params['id'];
if (this.lieuId) {
this.loadLieuWithMap();
}
console.log('ionViewDidEnter');
}
async loadLieu() {
this.lieuService.getLieu(this.lieuId).subscribe(res => {
this.lieu = res;
this.concertService.getUpcomingConcertsForLieuById(this.lieuId)
.subscribe(interne_next_concert => this.lieu.prochaine_concerts = this.getConcertsReadyToExpose( interne_next_concert));
this.concertService.getPreviousConcertsForLieuById(this.lieuId)
.subscribe(interne_previous_concert => this.lieu.concerts_passes = this.getConcertsReadyToExpose( interne_previous_concert));
this.adresseService.getAdresse(res.adresse.id).subscribe(resadd => {
this.lieu.adresse = resadd;
console.log(this.lieu);
});
});
}
async loadLieuWithMap() {
this.lieuService.getLieu(this.lieuId).subscribe(lieu => {
// loading address
this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
this.adresse = adresse;
this.map = L.map('mapIdDetail').setView([adresse.latitude, adresse.longitude], 13) ;
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright',
}).addTo(this.map);
// get full address
const adresseComp = adresse.numero + ' ' + adresse.rue + '<br>' + adresse.ville + ' ' + adresse.cp;
// popup Content
const popupContent = '<h2>' + lieu.nom + '</a></h2></br>' + adresseComp + '</div>';
L.marker([adresse.latitude, adresse.longitude]).addTo(this.map)
.bindPopup(popupContent);
});
this.lieu = lieu;
});
}
LaunchRoute() {
console.log('ADRESSE:', );
this.launchNavigator.navigate()
.then(
success => console.log('Launched navigator'),
error => console.log('Error launching navigator', error)
);
}
和 HTML 部分是:
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button color="primary" (click)="LaunchRoute()" >J'y vais</ion-fab-button>
</ion-fab>
问题是如果不将信息(号码、街道、城市...等)放在按钮中间,我就无法发送它,如下所示:
<ion-fab-button color="primary" (click)="LaunchRoute()" >{{Lieu.nom}}</ion-fab-button>
它不是很好,但是当我这样做时它当然工作得很好。 所以我认为我的 LaunchRoute 不好,也许我错过了一些我不知道的东西。
抱歉我的英语写作能力(以及部分法语代码)。 [编辑]
嗯,在咨询了其他几个论坛后终于解封了,终于找到了解决办法。 在我的 TS 文件中:
LaunchRoute(adresse) {
console.log('ADRESSE:', adresse);
this.launchNavigator.navigate(adresse)
.then(
success => console.log('Launched navigator'),
error => console.log('Error launching navigator', adresse, error)
);
}
并在 html 文件中:
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button vertical="bottom" horizontal="end" color="primary" (click)="LaunchRoute([ lieu.nom, adresse.numero, adresse.rue, adresse.ville])" ><img src="../../assets/img/navto.png" /></ion-fab-button>
</ion-fab>