Javascript 如何从Mongo数据库中获取标记的位置并在Google地图脚本上显示?|平均堆栈
我在大学里做最后一年的项目,已经和这个问题斗争了大约一个月了。任何帮助都将不胜感激 我正在进行的一个平均堆栈项目包括GoogleMapsAPI,我必须在其中显示一些对象在地图上的位置。对象的纬度和经度存储在数据库中。我们现在要做的是从数据库中获取对象的纬度和经度,并将标记放在其位置!我可以通过硬编码标记的lat和long来手动添加标记,但无法通过从后端获取数据来显示标记!我还添加了一个功能,当用户右键单击地图时,会在该位置放置一个标记 此组件的所有代码附在下面:Javascript 如何从Mongo数据库中获取标记的位置并在Google地图脚本上显示?|平均堆栈,javascript,angular,google-maps-api-3,google-maps-markers,mean-stack,Javascript,Angular,Google Maps Api 3,Google Maps Markers,Mean Stack,我在大学里做最后一年的项目,已经和这个问题斗争了大约一个月了。任何帮助都将不胜感激 我正在进行的一个平均堆栈项目包括GoogleMapsAPI,我必须在其中显示一些对象在地图上的位置。对象的纬度和经度存储在数据库中。我们现在要做的是从数据库中获取对象的纬度和经度,并将标记放在其位置!我可以通过硬编码标记的lat和long来手动添加标记,但无法通过从后端获取数据来显示标记!我还添加了一个功能,当用户右键单击地图时,会在该位置放置一个标记 此组件的所有代码附在下面: import { Compone
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data.service';
declare var getContext: any;
declare var google: any;
declare var MarkerClusterer:any;
var markerArray = [];
@Component({
selector: 'dashboard-cmp',
moduleId: module.id,
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit{
// public promos;
constructor(private _data:DataService){}
ngOnInit(){
// this.getpromo();
}
// getpromo(){
// this._data.doGET().subscribe(
// data => { this.promos = data},
// // lat => {this.promos.latitude = lat},
// // long => {this.promos.longitude = long}
// err => console.error(err),
// () => console.log('done loading Promos')
// );
// }
}
// MAPS
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var islamabad = { lat:33.6844, lng: 73.0479 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: islamabad
});
// Add a marker at the center of the map.
addMarker(islamabad, map);
var image="https://img.icons8.com/emoji/48/000000/coin-emoji.png";
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map,
icon: image
});
var markerCluster = new MarkerClusterer(map, markerArray,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
}
google.maps.event.addDomListener(window, 'load', initialize);