Angularjs et Google maps API

Question

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 HTML

<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

Answer 1

Vous pouvez essayer d'utiliser ngMap. Nous l'avons utilisé dans notre projet. Fonctionne bien pour nous.

lien refernce: https://ngmap.github.io/

https://github.com/allenhwkim/angularjs-google-maps

Contrôleur: Vous pouvez instancier une instance de carte à l'aide NgMap service:

NgMap.getMap().then(function (map) { 
    $scope.map = map; 
}); 

Html: Ici, je reçois une liste d'organisations et nous pouvons utiliser ng-repeat sur <maker> tag et de distinguer entre les marqueurs, nous pouvons attribuer dynamiquement des identifiants aux marqueurs:

<ng-map default-style="false" id="map" center="current-position" zoom="12" style="height:550px;width:100%;"> 
    <marker ng-repeat="org in orgList" id="id_{{org.organizationLocationAddressId}}" position="{{org.location}}" on-click="selectOrg(org)" on-mouseover="showDetails(org)" on-mouseout="hideDetail()" draggable="{{org.isDraggable}}" on-dragend="changeLocation($event)" on-position-changed="getMarkerPosition()" icon="{{org.organizationLocationId == selectedId?iconsList.SELECTED_ICONS[org.organizationTypeIconsEnum]:org.organizationTypeIcon}}"></marker> 
</ng-map>