谷歌地图directionsService() - angularJs
Google maps directionsService() - angularJs
嗨,我有一个问题:)在AngularJS中,我为G-maps API "DirectionsStatus"创建模块。模块检查我的位置(地理位置)下一个用户选择"目的地"并创建"地图方向"。一切看起来都很好,但确实创造了"地图方向"。HTML:
<div class="wrapp" ng-controller="googlemapoutput">
<div id="map-canvas" style="height: 400px;"></div>
<div class="row">
<select id="end">
<option>
Floriańska 42, 38-200 Jasło, Polska
</option>
<option>
Zegrzyńska 1, Legionowo, Polska
</option>
</select>
<button id="btn" ng-click="calcRoute()">
Jak dojechać ?
</button>
</div>
</div>
JS:
angular.module('starter.controllers', [])
.controller('googlemapoutput', function ($scope) {
var map;
var mapOptions;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true
});
var directionsService = new google.maps.DirectionsService();
$scope.initialize = function () {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
var mapOptions = {
zoom: 18,
center: pos
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: pos,
map: map
});
});
};
$scope.calcRoute = function () {
navigator.geolocation.getCurrentPosition(function (position) {
var end = document.getElementById('end').value;
var pos = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
var request = {
origin: pos,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
console.log(status);
}
});
});
};
google.maps.event.addDomListener(window, 'load', $scope.initialize);
});
谢谢你的帮助
问题是您没有告诉directionsDisplay
对象它与哪个映射相关联。您可以在调用setDirections
之前(或之后)添加这一行。
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
}
或者你可能会更好地做,当你创建地图,在initialize
函数:
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- AngularJS:我可以跳过函数参数回调吗
- AngularJS UI路由器不能像ng路由器那样工作
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何包含特定于每个视图angularjs的javascript文件
- AngularJS:ng之后,重复$scope值未按预期更新
- AngularJS-在JSON选择器中使用变量名
- $window.ga在AngularJS事件中未定义
- AngularJS-使用'true'属性
- 打开一个模态并将其链接到AngularJS中的指令
- Angularjs代码未在匿名函数中运行
- angularjs+rails应用程序中未显示模板
- 我的AngularJS表达式没有'不起作用
- AngularJS JSON not arriving php
- 使用AngularJS中的筛选器更新给定的表
- Angularjs工厂注入错误
- AngularJS设计指南
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 使用angularjs验证文本框中的电子邮件
- 使用angularjs向浏览器发送servlet响应(下载功能)