Angularjs谷歌地图添加标记

时间:2016-11-18 09:55:40

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

我正在开发一个项目,需要根据从数据库中检索到的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();
});

有什么我忘了添加或??

1 个答案:

答案 0 :(得分:0)

请参阅此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)
});

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

希望这能解决您的问题