[ngMap] Exercice d’affectation d’adresses Google Map à des vendeurs.

IntroductionngMap


Un premier petit exercice fait en 1h30 heures avec ngMap., un module angularJs pour google map.

L’app permet d’affecter des adresses à des vendeurs en prospection(Ensuite, on peut passer le tableau de json à un calendrier, mais je ne le fais pas ici). A tester ici .

Les markers apparaissent lorsque le tableau d’adresses JSON $scope.liste est peuplé . On peut donc envisager l’inverse -> Afficher les markers après un chargement $http de $scope.liste. Fonctionnellement parlant, on peut par exemple envisager d’afficher les markers en fonction de la date du jour et de l’id utilisateur du Vendeur dans son téléphone portable. ce qu’il faudrait, c’est pouvoir passer les adresses à google navigation, lorsque le bouton du prospect a été cliqué.

Pour installer ng-Map, utiliser Bower qui installe automatiquement toutes les dépendances.

 

Le code :


 

Le fichier Js  :


var app = angular.module('App', ['ngMap'])

app.controller('MainCtrl', function($scope) {
	$scope.adresse="";
	$scope.liste = [];
	$scope.nomVendeur = "";
	$scope.vendeurs = [];

	/* Initialisation de la date et de l'heure du jour en cours */
	var date = new Date();
	var d = date.getDate();
    d = ("0" + d).slice(-2)
    var m = date.getMonth();
	m = (m+1);
    m = ("0" + m).slice(-2)
    var y = date.getFullYear();

	$scope.date  =  d+'-'+m+'-'+y;

	/* Cherche une adresse dans googlemap et l'ajoute à la liste*/
	$scope.chercherAdresse = function(adresse){
		if(adresse){
			var x = adresse;
			$scope.adresseOk = x;
		}
		else{
			var x = $scope.adresse;
			$scope.adresseOk = x;
			$scope.liste.push({"Adresse":x});
		}
	}

	/* Affecte la liste des villes à un vendeur */
	$scope.affecterListe = function(){
		var x = angular.copy($scope.nomVendeur);
		var z = angular.copy($scope.liste); // Angular Copy debinde le z de $scope.liste
		$scope.vendeurs.push({"nom":x,"liste":z});

	}

	/* Supprimer une adressse */
	$scope.s=function(index){
		$scope.liste.splice(index,1);
	}

});

le fichier Html :

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="utf-8" />
		<title>Exercice Google Maps.</title>
		<script src='bower_components/angular/angular.min.js'></script>
		<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
		<script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script>
	</head>
	
	<body ng-controller="MainCtrl">
		
		<div>
		
			<ng-map style="height:100%" center="{{adresseOk}}" zoom="14">
			<marker ng-repeat="l in liste" position="{{l.Adresse}}" ></marker>
			</ng-map>
		</div> 
	
		<div class ="div">
			<h1>Trouver une adresse </h1>
			<input ng-model="adresse"placeholder="Entrez l'adresse"></input> 
			<button ng-click="chercherAdresse()">Chercher</button><br><br>
			Liste des Adresses au {{date}}:<br>
			<span ng-repeat="l in liste"><button ng-click="chercherAdresse(l.Adresse)">{{l.Adresse| uppercase}}</button>
			<button ng-click="s($index)">Supprimer</button> <br></span>
		</div> 
		
		<div class ="div">
			<h1>Affecter la liste au vendeur</h1> :<br>
			<input ng-model="nomVendeur" placeholder="Entrez le nom du vendeur"></input> 
			<button ng-click="affecterListe()"> Affecter</button><br>
			<span ng-repeat="v in vendeurs">{{v.nom| uppercase}}<br>
				<p><ul ng-repeat="k in v.liste"><button ng-click="chercherAdresse(k.Adresse)">{{k.Adresse| uppercase}}</button><br></ul></p>
			</span>
		</div> 	
		<script src="app2.js"> </script>
			
	</body>

	<style>
	.angular-google-map-container { height: 400px; }
	.div{
	border-style: groove;
	}
	</style>
</html>

Publicités