Angularjs和谷歌地圖API

Question

我有一個谷歌地圖在AngularJS，我試圖創建一個方向（從A到B）的每個ng-repeat的標記。這我們我的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> 

這是我在我的控制器代碼：

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

    } 

我已經看過了不同角度的項目，但一切我嘗試在地圖顯示不出來，可能有人請幫助我與我的簡單的代碼implimenting，所以我可以發送2個地址或郵政編碼的功能在ng-repeat和地圖將顯示路線，而不是一個正義的靜態地圖，因爲它是？

謝謝

Answer 1

你可以嘗試使用ngMap。我們已經在我們的項目中使用了它。爲我們工作得很好。

Refernce鏈接：https://ngmap.github.io/

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

在控制器：可以實例使用地圖實例NgMap服務：

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

在HTML中：在這裏，我得到一個組織的名單，我們可以在上使用ng-repeat標籤，我們可以指定ID的動態標記標記來區分：

<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>