如何从Mongo数据库获取标记的位置并在Google Maps脚本上显示？ |平均堆栈

问题描述

我正在大学里完成我的最后一年项目，并且已经为这个问题苦苦挣扎了大约一个月。任何帮助将不胜感激！

我正在从事的MEAN Stack项目包括Google Maps API，我必须在其中显示地图上某些对象的位置。对象的纬度和经度存储在数据库中。现在，我们要做的是从数据库中获取对象的经度和纬度，并将标记放在其位置！我能够通过对Lat和Longs进行硬编码来手动添加标记，但无法通过从后端获取数据来显示它们！我还添加了一项功能，当用户右键单击地图时，会在该位置放置一个标记。

该组件的所有代码都附在下面：

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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）