我尝试从数据库 FireStore 存储纬度和经度,以便可以检索它并用于传单以在 map 上显示标记。
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);
}
}
问题是,根据我在主页类中上面的代码,标记没有显示在 map 上,并且控制台日志中没有错误显示。知道为什么根据我上面的代码标记没有显示在 map 上吗?
最佳答案
最后我解决了为什么标记没有显示在 map 上的问题! .
将数据保存到 firestore 数据库后,我在 Firebase 服务类
中创建了 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);
}
现在我在 map 上有了所有标记
关于javascript - 如何从数据库 Firestore 存储纬度和经度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59562070/