AngularJS Google Map с несколькими маркерами

Question

В настоящее время я разрабатываю проект Ionic Framework (AngularJS), который использует географическое местоположение и Карты Google для отображения позиции пользователя.

Я пытаюсь показать пользователям географическое местоположение и несколько маркеров по всему району.

У меня есть 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" 
} 
]