带有多个标记的 AngularJS 谷歌地图 [英] AngularJS Google Map with Multiple Markers

问题描述

我目前正在开发一个 Ionic Framework (AngularJS) 项目，该项目使用地理位置和 Google 地图来显示用户的位置.

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

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

地点

var 标记 = [{'伦敦眼，伦敦'，51.503454，-0.119562}，{'伦敦威斯敏斯特宫'，51.499633，-0.124755}];

Controller.JS

//1. 谷歌地图//FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {$scope.initialise = function() {var myLatlng = new google.maps.LatLng(37.3000, -120.4833);var mapOptions = {中心:myLatlng，缩放: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({位置:新 google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)，地图:地图，动画:google.maps.Animation.DROP，标题:我的位置"});});$scope.map = 地图；};google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());});

解决方案

//1. Google Map//var 城市 = [{城市 : '位置 1',描述 : '测试',纬度:52.238983，长:-0.888509},{城市 : '位置 2',描述 : '测试',纬度:52.238168，长:-52.238168},{城市 : '位置 3',描述 : '测试',纬度:52.242452，长:-0.889882},{城市 : '位置 4',描述 : '测试',纬度:52.247234，长:-0.893567},{城市 : '位置 5',描述 : '测试',纬度:52.241874，长:-0.883568}];FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {//地图设置//$scope.initialise = function() {var myLatlng = new google.maps.LatLng(37.3000, -120.4833);var mapOptions = {中心:myLatlng，缩放: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({位置:新 google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)，地图:地图，动画:google.maps.Animation.DROP，标题:我的位置"});});$scope.map = 地图；//附加标记//$scope.markers = [];var infoWindow = new google.maps.InfoWindow();var createMarker = 函数(信息){var 标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(info.lat, info.long)，地图:$scope.map，动画:google.maps.Animation.DROP，标题:info.city});marker.content = '<div class="infoWindowContent">'+ info.desc + '

';google.maps.event.addListener(marker, 'click', function(){infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);infoWindow.open($scope.map, 标记);});$scope.markers.push(marker);}for (i = 0; i

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

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.

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

解决方案

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

});

这篇关于带有多个标记的 AngularJS 谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！