[英]How to store lat and long from database Firestore
我尝试从 Database FireStore 存储纬度和经度,因此可以检索它并用于传单以在地图上显示标记。
Firebase 服务类
export interface PostionsAddress {
id?: string,
name: string,
notes: string,
lat:any,
lng:any
}
@Injectable({
providedIn: 'root'
})
export class PostionServiceService {
private ideas: Observable<PostionsAddress[]>;
private ideaCollection: AngularFirestoreCollection<PostionsAddress>;
constructor(private afs: AngularFirestore) {
this.ideaCollection = this.afs.collection<PostionsAddress>('Locations');
this.ideas = this.ideaCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
}
getIdeas(): Observable<PostionsAddress[]> {
return this.ideas;
}
}
这是主页类的代码
export class HomePage {
private $location: Observable<PostionsAddress[]>;
map: Map;
constructor(public auth: AngularFireAuth,private locationservice:PostionServiceService) { }
ionViewDidEnter() { this.loadmap(); }
loadmap() {
setTimeout(() => {
this.map = new Map('map').setView([33.3152, 44.3661], 10);
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
}).addTo(this.map);
---- HERE GETTING COORDS FROM DATABASE ------
this.locationservice.getIdeas().pipe(map(a=>{
return a.map(a=>{
let Icon = L.icon({
iconUrl: 'assets/marker-icon.png',
});
L.marker([a.lat,a.lng], {
icon: Icon
}).addTo(this.map);
console.log(a.lat,a.lng)
})
}))
}, 100);
}
}
问题是,根据我上面在主页类中的代码,标记没有显示在地图上,并且控制台日志中没有错误显示。 知道为什么标记没有根据我上面的代码显示在地图上吗?
最后我解决了为什么标记没有显示在地图上的问题! .
将数据保存到 firestore 数据库后,我在Firebase Service Class
创建了getAllMarkers
方法以从数据库检索数据标记集合,而getAllMarkers()
将返回所有标记(作为可观察对象)。
getAllMarkers() {
return this.afs.collection("Locations").valueChanges();
}
home.ts 文件
loadmap() {
setTimeout(() => {
this.map = new Map('map').setView([33.3152, 44.3661], 10);
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
}).addTo(this.map);
---------- HERE-----------
this.locationservice.getAllMarkers().subscribe((markers: any) => {
markers.forEach(singlemarker => {
let Icon = L.icon({
iconUrl: 'assets/marker-icon.png',
});
L.marker([singlemarker.lat, singlemarker.lng], {
icon: Icon
}).addTo(this.map);
console.log(singlemarker.lat, singlemarker.lng)
});
});
}, 100);
}
现在我在地图上有所有标记
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.