J'ai une carte google dans AngularJS, j'essaie de créer des marqueurs avec une direction (donc une ligne de A à B) pour chaque ng-repeat. Cela nous mon code HTMLAngularjs et Google maps API
<div class="col-lg-12" ng-repeat="quotes in quotes">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-success pull-right">{{formatDte(quotes.date)}}</span>
<h5>{{quotes.name}}</h5>
</div>
<div class="ibox-content">
<h1>{{quotes.pnum}}</h1>
<p>{{quotes.pcodefrom}} to {{quotes.pcodeto}}</p>
<small>Reg : {{quotes.Reg}}</small>
<br/>
<small>Notes : {{quotes.notes}}</small>
<div class="row">
<div class="col-md-12">
<div class="ibox ">
<div class="ibox-content">
<section id="map" ng-controller="GoogleMaps">
<div ui-map="myMap" ui-options="mapOptions" class="google-map"></div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ceci est mon code dans mon contrôleur:
function quoteCtrl ($scope,$http,refnum,$state,$uibModal,notify) {
$scope.mapOptions = {
zoom: 11,
center: new google.maps.LatLng(40.6700, -73.9400),
// Style for Google Maps
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var urlgetjobs = './dbscripts/getQuotes.php';
$http({method: 'GET', url: urlgetjobs}).success(function(data) {
$scope.quotes = data;
}).error(function(data){
});
$scope.formatDte=function(dte){
var dtee = moment(dte).format("dddd Do MMMM, h:mm a");
return dtee;
}
}
J'ai regardé différents projets angulaires, mais tout ce que je tente la carte ne montre pas, quelqu'un pourrait me aider s'il vous plaît avec l'implimentation dans mon code simple, donc je peux simplement envoyer 2 adresses ou codes postaux à une fonction dans le ng-repeat et la carte affichera l'itinéraire plutôt qu'une carte statique juste comme il est?
Merci
Une erreur spécifique vous l'obtenez dans la console du navigateur? –
La carte ne fonctionne pas simplement en demandant comment ajouter un itinéraire –