Question

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

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

我的Geo Location工作正常，但似乎无法添加多个标记。

地点

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());
});

Answer 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());

});

Answer 2

这里是完整的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);
        });

    }
};
 });

经过测试，我希望它对您有用，如果您需要任何帮助，请告诉我顺便说一句，这里是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"
}
]

具有多个标记的AngularJS Google地图

2 个答案: