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>