嘗試解析外部json文件以在Google Maps API中創建標記

Question

我正在使用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代碼，因為我測試了對其進行驗證。 但是我可以刪除“位置”：並刪除括號以使其更易於解析為Google地圖嗎？

我正在嘗試使用$ 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
    });

});

Answer 1

提供的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
        });

    });

});

工作實例

 angular.module('mapApp', ['ionic']) .controller('mapCtrl', function ($scope, $http) { var mapOptions = { center: new google.maps.LatLng(38.5602, -121.4241), zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); $http.get('https://gist.githubusercontent.com/vgrem/c7ec78e7078c2c9ed1c3/raw/959e9d8b8e60544fcc169ea890e84a2624ed8bbb/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 }); }); }); }); 

 #map-canvas { width: 800px; height: 600px; } 

 <link href="http://code.ionicframework.com/1.1.1/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true"></script> <div ng-app="mapApp" ng-controller="mapCtrl"> <div id="map-canvas"></div> </div>