Angularjs谷歌地图添加标记答案

【问题标题】：Angularjs Google Map Add MarkersAngularjs谷歌地图添加标记
【发布时间】：2016-11-18 09:55:40
【问题描述】：

我正在做一个项目，该项目需要根据从数据库中检索到的 latlng 放置额外的标记。地图加载成功，但不知何故我无法在地图上显示标记。

这是我的代码

JAVASCRIPT

var app = angular.module('myApp', ['ngResource']);

app.service('Map', function($q) {
  this.init = function() {
      navigator.geolocation.getCurrentPosition(function(position) {
        var MapOptions = {
          center: new google.maps.LatLng(38.431934, 141.309402),
          zoom: 16,
          disableDefaultUI: true,
          draggable: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        this.map = new google.maps.Map(document.getElementById("map"), MapOptions);
        this.places = new google.maps.places.PlacesService(this.map);
      });
    }  
});

app.controller('MainCtrl', function($scope, $resource, Map) {
  $scope.fetchdata = {};
  var Fetchdata = $resource('http://localhost:8080/fetchnote');
  Fetchdata.query(function(results) {
    $scope.fetchdata = results;
    angular.forEach($scope.fetchdata, function(value, index) {
      var lat = value.latitude;
      var lng = value.longitude;
      addtomap(lat, lng)
    })
  })

  function addtomap(lat, lng, icon) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: Map.map
    });
  }
  Map.init();
});

有什么我忘了补充吗？？

【问题讨论】：

你可以尝试在 Map.init 之后调用 addtomap(lat, lng) 函数
试一下还是一样

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

看到这个http://jsfiddle.net/pc7Uu/3153/

 Map.init();
 angular.forEach($scope.fetchdata, function(value, index) {
  //alert(value);
  var lat = value.latitude;
  var lng = value.longitude;
  addtomap(lat, lng)
});

您在地图初始化之前调用了您的标记，将值替换为您的服务器值，它应该可以工作。

希望能解决你的问题

【讨论】：