Question

.controller('homeCtrl', function($scope, Markers) {
var username = window.localStorage.getItem('username');
var id_user = window.localStorage.getItem('id_user');
console.log(username);
console.log(id_user);
document.getElementById('usernameArea').innerHTML = username;

var map = null;

google.maps.event.addDomListener（window，'load'，function（）{ var myLatlng = new google.maps.LatLng（-7.977467753377946,112.63355255126953）;

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    navigator.geolocation.getCurrentPosition(function(pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        //var tes = new google.maps.Latlang();

        //var tes = map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var tes = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
        console.log(tes.lat(), tes.lng());
        //console.log(tes.lng());
        window.localStorage.setItem('lat',tes.lat());
        window.localStorage.setItem('lng',tes.lng());

        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });
         loadMarkers();

    });

    $scope.map = map;

});

function loadMarkers（）{

  //Get all of the markers from our Markers factory
  Markers.getMarkers().then(function(markers){
    console.log("Markers: ", markers);

    var records = markers.data.markers;
    console.log(records.length);

    for (var i = 0; i < records.length; i++) {

      var record = records[i];   
      var markerPos = new google.maps.LatLng(record.latitude, record.longitude);
      console.log(record.latitude);
      // Add the markerto the map
      var marker = new google.maps.Marker({
          setMap: map,
          animation: google.maps.Animation.DROP,
          position: markerPos
      });

      var infoWindowContent = "<h4>" + record.name + "</h4>";          
      addInfoWindow(marker, infoWindowContent, record);

    }

  });

}

function addInfoWindow（marker，message，record）{

  var infoWindow = new google.maps.InfoWindow({
      content: message
  });

  google.maps.event.addListener(marker, 'click', function () {
      infoWindow.open(map, marker);
  });

}

}） this is the result, the marker which get latitude and longitude from database doesn't show up

Answer 1

好的，我看到了这个错误，当你在loadMarkers（）函数中创建标记时，你有这个：

var marker = new google.maps.Marker({
      setMap: map,
      animation: google.maps.Animation.DROP,
      position: markerPos
});

您使用的是关键的setMap及其地图，因此代码应为：

var marker = new google.maps.Marker({
      map: map,
      animation: google.maps.Animation.DROP,
      position: markerPos
});

多个标记未使用angualrjs显示在Google地图中

1 个答案: