AngularJS中谷歌地图的方向标记
Directions markers for Google Maps in AngularJS
我一直在互联网上寻找解决方案,但运气不佳。我正在Umbraco(AngularJS)建立一个网站,我使用UI谷歌地图插件,效果很好!
我已经实现了路线指示,它很有魅力——我唯一的问题是,当地图上显示指示时,我无法更改"a"answers"B"图标。
这就是我的范围:
$scope.map = {
center: {
latitude: 55.711898,
longitude: 9.5387363
},
zoom: 12,
events: {
'tilesloaded': function (map) {
if (load) {
$timeout(function () {
maps.event.trigger(map, "resize");
var marker = new maps.Marker({
position: center,
map: map,
icon: biscuitIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
directionsDisplay.setMap(map);
}, 500);
load = false;
} else {
maps.event.trigger(map, "resize");
}
}
},
options: {
disableDefaultUI: true,
zoomControl: false,
styles: [{'featureType':'water','elementType':'all','stylers':[{'color':'#f0f0f0'}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#000000'}]},{'featureType':'road.arterial','elementType':'geometry.fill','stylers':[{'color':'#363636'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'poi.attraction','elementType':'geometry.fill','stylers':[{'color':'#cccccc'}]}]
},
control: {}
};
当你填写"发件人"-"收件人"表格时,会发生以下情况:
$scope.getDirections = function(){
directionsService.route({
origin: $scope.startlocation,
destination: $scope.endlocation,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0].legs[0];
directionsDisplay.setPanel(document.getElementById('directions-panel'));
} else {
if(status === 'NOT_FOUND') {
window.alert('No results - Please try again');
}
}
});
}
我尝试过"makeMarker"方法(http://jsfiddle.net/6LwgQ/1/)但没有运气。你们谁能指出我的头撞到墙上的地方吗?
哦,顺便说一句,我在使用"makeMarker"时尝试过"console.log"信息,所有信息都显示在我的控制台中,但它没有出现在我的地图上:(我现在非常绝望…
提前感谢!/Kucko
对于放置标记,可以使用ui-gmap-markers
指令。这个愚蠢的例子展示了打印路线和设置结束/开始样式的标记:
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function ($scope, uiGmapIsReady, $log) {
$scope.startlocation = 'New York, NY';
$scope.endlocation = 'San Diego, California';
$scope.markers = [];
$scope.icons = {
start: {
url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
size: { width: 44, height: 32 },
origin: { x: 0, y: 0 },
anchor: { x: 22, y: 32 }
},
end: {
url: 'http://maps.google.com/mapfiles/ms/micons/green.png',
size: { width: 44, height: 32 },
origin: { x: 0, y: 0 },
anchor: { x: 22, y: 32 }
}
};
$scope.map = {
center: {
latitude: 55.711898,
longitude: 9.5387363
},
zoom: 12,
options: {
disableDefaultUI: true,
zoomControl: false,
styles: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': [{ 'color': '#f0f0f0' }] }, { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#000000' }] }, { 'featureType': 'road.arterial', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#363636' }] }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'poi.attraction', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#cccccc' }] }]
},
control: {}
};
uiGmapIsReady.promise()
.then(function (instances) {
printRoute();
});
var printRoute = function () {
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: $scope.startlocation,
destination: $scope.endlocation,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(directionsRequest, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var map = $scope.map.control.getGMap();
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
suppressMarkers: true
});
var leg = response.routes[0].legs[0];
setMarker(0,leg.start_location, $scope.icons.start, 'title');
setMarker(1,leg.end_location, $scope.icons.end, 'title');
} else {
$log.error('Request failed: ' + status);
}
});
}
var setMarker = function (id,latLng, icon, title) {
var markerInfo = {
id: id,
latitude: latLng.lat(),
longitude: latLng.lng(),
title: title,
icon: icon
};
$scope.markers.push(markerInfo);
};
});
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control" options="map.options" events="map.events">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
Plunker
相关文章:
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 使用谷歌地图API和phonegap显示当前位置+方向
- 带有自定义标记的谷歌地图方向APIv3
- 基于谷歌地图API方向服务构建的替代路线
- 谷歌地图API-从方向的原点检索定位
- 谷歌地图 API 方向
- 如何使用谷歌地图 API v3 旋转地图方向
- 逐步显示谷歌地图方向
- 无法调用方法'应用'关于为jquery谷歌地图插件设置方向的未定义
- 如何在谷歌地图javascript中在地图上拖动标记(可拖动方向)时显示更新的坐标
- 多站方向-谷歌地图v3
- 使用谷歌地图api获取方向,无需使用地图
- JSONP和谷歌地图方向API
- 如何在谷歌地图服务的Go客户端中使用方向响应
- 如何使用谷歌地图API显示静态方向
- 我可以从网页(而不是服务器)调用谷歌地图方向API吗
- 在谷歌地图中指定保存的路点's方向服务
- 谷歌地图方向URL与针在Lat/Long
- 谷歌地图v3 JS梯度/方向上的多条路径
- 谷歌地图与方向 - 我可以在没有表单标签的情况下做到这一点吗?