javascript - Angularjs 和 Google map API

Question

我在 AngularJS 中有一个谷歌地图，我正在尝试为每个 ng-repeat 创建带有方向的标记(因此从 A 到 B 的一条线)。这是我的 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>

这是我 Controller 中的代码:

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

    }

我看过不同的 Angular 项目，但我尝试的所有内容都没有显示 map ，有人可以帮助我实现我的简单代码，这样我就可以将 2 个地址或邮政编码发送到 ng-repeat 中的函数 map 将显示路线而不是静态 map ？

谢谢

Answer 1

您可以尝试使用ngMap。我们已经在我们的项目中使用了它。对我们来说工作得很好。

引用链接:https://ngmap.github.io/

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

在 Controller 中:您可以使用NgMap服务实例化 map 实例:

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

在 Html 中:这里我得到了组织列表，我们可以在 <maker> 上使用 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>