Angularjs和谷歌地图API
我有一个谷歌地图在AngularJS,我试图创建一个方向(从A到B)的每个ng-repeat的标记。这我们我的HTMLAngularjs和谷歌地图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>
这是我在我的控制器代码:
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和地图将显示路线,而不是一个正义的静态地图,因为它是?
谢谢
你可以尝试使用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>
我添加了JS文件,它说NgMap没有定义,也是
无法读取属性'directionsRenderers'undefined –
您需要在声明模块的同时注入ngMap模块,并在您的控制器中注入NgMap服务。 –
任何特定的错误你得到它在浏览器控制台? –
没有地图的工作只是想知道如何添加路线 –