具有多个标记的AngularJS谷歌地图

I'm currently developing an Ionic Framework (AngularJS) project which uses Geo Location and Google Maps for displaying the user's position.

我目前正在开发一个Ionic Framework(AngularJS)项目,该项目使用Geo Location和Google Maps来显示用户的位置。

I'm trying to display the users Geo Location and multiple markers around the area.

我正在尝试显示用户地理位置和该区域周围的多个标记。

I've got the Geo Location working, but can't seem to add multiple markers.

我有Geo Location工作,但似乎无法添加多个标记。

Locations

var markers = [
    {'London Eye, London', 51.503454,-0.119562},
    {'Palace of Westminster, London', 51.499633,-0.124755}
]; 

Controller.JS

// 1. Google Map // 
FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {
    $scope.initialise = function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
        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 myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                animation: google.maps.Animation.DROP,
                title: "My Location"
            });
        });
        $scope.map = map;
    };
    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
});

2 个解决方案

#1

// 1. Google Map // 
var cities = [
    {
        city : 'Location 1',
        desc : 'Test',
        lat : 52.238983,
        long : -0.888509 
    },
    {
        city : 'Location 2',
        desc : 'Test',
        lat : 52.238168,
        long : -52.238168
    },
    {
        city : 'Location 3',
        desc : 'Test',
        lat : 52.242452,
        long : -0.889882 
    },
    {
        city : 'Location 4',
        desc : 'Test',
        lat : 52.247234,
        long : -0.893567 
    },
    {
        city : 'Location 5',
        desc : 'Test',
        lat : 52.241874,
        long : -0.883568 
    }
];

FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {
    // Map Settings //
    $scope.initialise = function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      // Geo Location /
        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                animation: google.maps.Animation.DROP,
                title: "My Location"
            });
        });
        $scope.map = map;
        // Additional Markers //
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();
        var createMarker = function (info){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(info.lat, info.long),
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                title: info.city
            });
            marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                infoWindow.open($scope.map, marker);
            });
            $scope.markers.push(marker);
        }  
        for (i = 0; i < cities.length; i++){
            createMarker(cities[i]);
        }

    };
    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());

});

#2

here is the complete js file , you can just copy paste this

这里是完整的js文件,你可以复制粘贴这个

var myItemsApp = angular.module('myItemsApp', []);

myItemsApp.factory('itemsFactory', ['$http', function ($http) {
var itemsFactory = {
    itemDetails: function () {
        return $http({
                url: "pos.json",
                method: "GET"

            })
            .then(function (response) {
                return response.data;
                console.log(response.data);
            });
    }
};
return itemsFactory;

}]);




 myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function ($scope, itemsFactory) {
var promise = itemsFactory.itemDetails();

promise.then(function (data) {
    $scope.itemDetails = data;
    console.log(data);
});
$scope.select = function (item) {
    $scope.selected = item;
};
$scope.selected = {};

$scope.selected.latitude;
 }]);


 myItemsApp.directive("myMaps", function ($timeout) {
return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    link: function (scope, element, attrs) {
        scope.$watchCollection('selected', function () {
            var lat = scope.selected.latitude;
            var lon = scope.selected.longitude;

            var myLatLng = new google.maps.LatLng(lat, lon);
            var mapOptions = {
                center: myLatLng,
                zoom: 12,
                myTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: "my town"
            });
            marker.setMap(map);
        });

    }
};
 });

its tested , i hope it will work for you , let me know if you need any help by the way here is the json file for better understanding

经过测试,我希望它对你有用,如果你需要任何帮助,请告诉我这里是json文件,以便更好地理解

{
"snappedPoints": [
    {
        "location": {
            "latitude": -35.2784167,
            "longitude": 149.1294692
        },
        "originalIndex": 0,
        "placeId": "ChIJoR7CemhNFmsRQB9QbW7qABM"
},
    {
        "location": {
            "latitude": -35.280321693840129,
            "longitude": 149.12908274880189
        },
        "originalIndex": 1,
        "placeId": "ChIJiy6YT2hNFmsRkHZAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2803415,
            "longitude": 149.1290788
        },
        "placeId": "ChIJiy6YT2hNFmsRkHZAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2803415,
            "longitude": 149.1290788
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.280451499999991,
            "longitude": 149.1290784
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2805167,
            "longitude": 149.1290879
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2805901,
            "longitude": 149.1291104
        },
        "placeId": "ChIJI2FUTGhNFmsRcHpAbW7qABM"
},
    {
        "location": {
            "latitude": -35.2805901,
            "longitude": 149.1291104
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.280734599999995,
            "longitude": 149.1291517
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.2807852,
            "longitude": 149.1291716
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.2808499,
            "longitude": 149.1292099
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.280923099999995,
            "longitude": 149.129278
        },
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},
    {
        "location": {
            "latitude": -35.280960897210818,
            "longitude": 149.1293250692261
        },
        "originalIndex": 2,
        "placeId": "ChIJW9R7smlNFmsRMH1AbW7qABM"
},

    {
        "location": {
            "latitude": -35.284728724835304,
            "longitude": 149.12835061713685
        },
        "originalIndex": 7,
        "placeId": "ChIJW5JAZmpNFmsRegG0-Jc80sM"
}
]