Javascript 在ionic中从json创建google地图标记

我想用我的json制作谷歌地图标记：

http://devonder.pe.hu/api/index.php

我是这样使用工厂的

.factory('Markers', function($http) {

  var markers = [];

  return {
    getMarkers: function(){

      return $http.get("http://devonder.pe.hu/api/index.php").then(function(response){
          markers = response;
          return markers;
      });

    }
  }
})

.controller('mapsctrl', function() {
        var myLatLng = {lat: 1.443306, lng: 125.182833};
    var myLatLng2 ={lat: 1.440444, lng: 125.117778};


      var fasilitas =Markers.getMarkers();



        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: myLatLng
        });

    var infoWindow = new google.maps.InfoWindow(), marker, i;
    for( i = 0; i < fasilitas.length; i++ ) {
      var obj=fasilitas[i];
     // var gas[0];
      var judul
        var position = new google.maps.LatLng(obj.latitude, obj.longitude);
        //bounds.extend(position);
    //var myLatLngg = {lat: [3][1], lng: [3][2]};
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: obj.nama,
      icon: 'img/marker/'+obj.id_kategori +'.png'
        });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                var judul = fasilitas[i]
                infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
                infoWindow.open(map, marker);
            }
        })(marker, i));

    } 
    })

我的控制器是这样的

.factory('Markers', function($http) {

  var markers = [];

  return {
    getMarkers: function(){

      return $http.get("http://devonder.pe.hu/api/index.php").then(function(response){
          markers = response;
          return markers;
      });

    }
  }
})

.controller('mapsctrl', function() {
        var myLatLng = {lat: 1.443306, lng: 125.182833};
    var myLatLng2 ={lat: 1.440444, lng: 125.117778};


      var fasilitas =Markers.getMarkers();



        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: myLatLng
        });

    var infoWindow = new google.maps.InfoWindow(), marker, i;
    for( i = 0; i < fasilitas.length; i++ ) {
      var obj=fasilitas[i];
     // var gas[0];
      var judul
        var position = new google.maps.LatLng(obj.latitude, obj.longitude);
        //bounds.extend(position);
    //var myLatLngg = {lat: [3][1], lng: [3][2]};
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: obj.nama,
      icon: 'img/marker/'+obj.id_kategori +'.png'
        });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                var judul = fasilitas[i]
                infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
                infoWindow.open(map, marker);
            }
        })(marker, i));

    } 
    })

.controller（'mapsctrl'，function（）{
var Mylatng={lat:1.443306，lng:125.182833}；
var myLatLng2={lat:1.440444，lng:125.117778}；
var fasilitas=Markers.getMarkers（）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心：myLatLng
});
var infoWindow=new google.maps.infoWindow（），marker，i；
对于（i=0；iBuka:“+judul.jadwal_praktek+”
No Telp:“+judul.No_Telp+”）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
} 
})

---

而且它不工作。

看起来您正在使用标记工厂，而没有将其注入控制器

app.controller('mapsctrl',['Markers', function(Markers){
    var myLatLng = {lat: 1.443306, lng: 125.182833};
    var myLatLng2 ={lat: 1.440444, lng: 125.117778};
    var fasilitas =Markers.getMarkers();
    --- Rest of your code ---
}]);

//或

app.controller('mapsctrl',function(Markers){
    var myLatLng = {lat: 1.443306, lng: 125.182833};
    var myLatLng2 ={lat: 1.440444, lng: 125.117778};
    var fasilitas =Markers.getMarkers();
    --- Rest of your code ---
});

控制器请求一个

$http

，并在成功时返回值，这是一个承诺，因此您应该像这样使用它

.controller('mapsctrl', function() {
    var myLatLng = {lat: 1.443306, lng: 125.182833};
    var myLatLng2 ={lat: 1.440444, lng: 125.117778};

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: myLatLng
    });


    Markers.getMarkers().then(function(fasilitas){
        // var map = new google.maps.Map(document.getElementById('map'), {
        //  zoom: 16,
        //  center: myLatLng
        // });
        var infoWindow = new google.maps.InfoWindow(), marker, i; 
        for( i = 0; i < fasilitas.length; i++ ) {
            var obj=fasilitas[i];
            // var gas[0];
            var judul
            var position = new google.maps.LatLng(obj.latitude, obj.longitude);
            //bounds.extend(position);
            //var myLatLngg = {lat: [3][1], lng: [3][2]};
            var marker = new google.maps.Marker({
                position: position,
                map: map,
                title: obj.nama,
                icon: 'img/marker/'+obj.id_kategori +'.png'
                // visible : true
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    var judul = fasilitas[i]
                    infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
                    infoWindow.open(map, marker);
                }
            })(marker, i));
        } 
    });
});

.controller（'mapsctrl'，function（）{
var Mylatng={lat:1.443306，lng:125.182833}；
var myLatLng2={lat:1.440444，lng:125.117778}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心：myLatLng
});
Markers.getMarkers（）.then（函数（fasilitas）{
//var map=new google.maps.map（document.getElementById（'map'）{
//缩放：16，
//中心：myLatLng
// });
var infoWindow=new google.maps.infoWindow（），marker，i；
对于（i=0；iBuka:“+judul.jadwal_praktek+”
No Telp:“+judul.No_Telp+”）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
} 
});
});

什么不起作用？你能提供一些工作代码吗？控制台中是否有任何错误？没有错误，标记不显示。标记数据在json中。谢谢，我已经尝试过了。地图已显示，但标记未显示。您在fasilitas对象中获得了哪些值？你能提供fasilitas的样本数据吗。也可以使用markers=markers.concat（response）；而不是标记=响应；我尝试将json数据传递到fasilitas。因此坐标等将在fasilitas中显示。