Javascript 试图解析外部json文件以在google maps api中创建标记

我正在使用JavaScript和一个外部JSON文件。 这是我的JSON文件。它与我的js文件位于同一文件夹中。我调用了JSON文件csus_locations.JSON

{
 "locations": [
 {
    "latitude": 38.558961, 
    "longitude": -121.423011,
    "name": "AIRC",
    "title": "THIS IS WHERE STUFF GETS DONE!"
  },
{
    "latitude": 38.562605, 
    "longitude": -121.419683,
    "name": "GUY WEST",
    "title": "PRESIDENT?"
},
{
    "latitude": 38.556652, 
    "longitude": -121.423842,
    "name": "well",
    "title": "WORKOUT"
  },
{
    "latitude": 38.555465, 
    "longitude": -121.422551,
    "name": "Hornetsatdium",
    "title": "FOOTBAL!"
}

]}

我知道这是合法的json代码，因为我进行了测试以验证它。但是我可以删除位置吗：并删除括号以简化解析到谷歌地图的过程

我正在尝试使用$http.get解析json文件，但我的注意事项是，我确信我是否正确编写了代码

angular.module('app.controllers', ['ionic']) 

.controller('mapCtrl', function ($scope, $ionicSideMenuDelegate, $ionicLoading, $compile, $ionicPopup, $http) {

    $ionicSideMenuDelegate.canDragContent(false);

    var myLatlng = new google.maps.LatLng(38.5602, -121.4241);

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

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

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Sac State'
    });

       //i want to get parse with $http.get but i am not sure if i wrote this code correctly
        $http.get('csus_locations.json').success(function(res){
        console.log("success!");
        $scope.locations = res.locations;
        //window.alert("The app is reading the Json file!"); this was a test to see if the get function was working

            var latLng_csus = new google.maps.LatLng(value.latitude, value.longitude);
            var marker = new google.maps.Marker({
               position: latLng_csus,
               title: value.name
           });

    });

    /* this was my first attempt to create markers
    console.log(jsonCSUS);
    angular.forEach(jsonCSUS, function(value, key){
        var latLng_csus = new google.maps.LatLng(value.latitude, value.longitude);
        var marker = new google.maps.Marker({
               position: latLng_csus,
               title: value.name
           });
           marker.setMap(map);
    });*/


    var onSuccess = function (position) {

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
            content: compiled[0]
        });

        marker.setPosition(
            new google.maps.LatLng(
                position.coords.latitude,
                position.coords.longitude)
        );


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

        $scope.map = map;
        //$scope.map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));


    };

    function onError(error) {
        alert('code: ' + error.code + '\n' +
            'message: ' + error.message + '\n');
    }

    navigator.geolocation.watchPosition(onSuccess, onError, {
        maximumAge: 3000,
        timeout: 5000,
        enableHighAccuracy: true
    });

});

---

提供的JSON文件确实是有效的，因此您可以像这样初始化标记：

$http.get('csus_locations.json').success(function (data) {
    $scope.locations = data.locations;

    $scope.locations.forEach(function(item){

        var latLng = new google.maps.LatLng(item.latitude, item.longitude);
        var marker = new google.maps.Marker({
           position: latLng,
           title: item.name,
           map: map
        });

    });

});

工作示例

角度。模块'mapApp'，['ionic'] .controller'mapCtrl'，函数$scope，$http{ 变量映射选项={ 中心：新google.maps.LatLng38.5602，-121.4241， 缩放：16， mapTypeId:google.maps.mapTypeId.ROADMAP， 动物控制：错误， disableDefaultUI:true }; var map=new google.maps.Mapdocument.getElementByIdmap画布，mapOptions； $http.get'https://gist.githubusercontent.com/vgrem/c7ec78e7078c2c9ed1c3/raw/959e9d8b8e60544fcc169ea890e84a2624ed8bbb/csus_locations.json'.成功函数数据{ $scope.locations=data.locations； $scope.locations.forEachfunctionitem{ var latLng=new google.maps.LatLngitem.latitude，item.longitude； var marker=new google.maps.marker{ 位置：latLng， 标题：item.name， 地图：地图 }; }; }; }; 地图画布{ 宽度：800px； 高度：600px； }

---

开发人员工具控制台中是否有任何错误？你的网页是做什么的？你期望它做什么？结果与您期望的有什么不同？您不使用$Http.Get解析JSON，而是使用JSON.parse解析JSON，请参见此处->