Question

我使用AngularJS设置了地图。标记数据来自json文件并处于正常工作状态。但我希望用户能够点击按钮（从项目列表或信息窗口中）来获取从当前位置到所选目的地的路线。

我不知道如何将Google Maps Direction Service连接到我所拥有的。当前功能连接到标记列表中的按钮，而不是信息窗口。但我希望方向服务可以工作。

非常感谢任何和所有帮助。谢谢！

以下是网站（所有源代码均可用）http://portlandstreetcarbars.com/streetcar-bars-map/app/#/

这是HTML：

    <h3>Click on a bar below to view its location or get directions.</h3>
        <div class="horizontal">
          <div class="table"> 
              <article class="list-group-item" id="class" ng-repeat="marker in markers | orderBy : 'title'">
               <a href="#" ng-click="openInfoWindow($event, marker)">  
                   <div class="img-wrap"> 
                  <img id="bar-image" class="bar-image" src={{marker.image}} />
               <!-- End Image Gallery -->
                </div>   
              <h3 class="box-title">{{marker.title}}</h3>    
              </a>
              <input type='button' ng-click='getDirections(marker)' value='Get directions'>
            </article> 
        </div>
    </div>

  <h3 class="map">Click on a marker below to view its location or get directions.</h3>
   <section class="map-container">
         <div id="map"></div> 
              <h3>Directions Go here</h3> 
      <div id="panel">
         <input type='button' id="reset-map" ng-click='clearMarkers()' value='Reset Map'>
       </div>
  </section>

这是脚本：

var mapApp = angular.module('mapControllers', []);

 mapApp.controller('ListController', function ($scope, $http) {
   $http.get('scripts/bars.json').
    success(function(data, status, headers, config) {
      $scope.bars = data;

      var myLatlng100 = new google.maps.LatLng(45.522535,-122.659492);
      var mapOptions = {
            center: myLatlng100,
            zoom: 15,
            mapTypeControl: true,
            zoomControl: true,
            zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL
            }
      };

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (bar){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(bar.lat, bar.lng),
            title: bar.name
            });

        marker.content = '<div class="contentString"><img src="' + 
        bar.image +
        '"><br/>'+ 
        bar.address +
        ' '+ 
        bar.city +
        ', '+
        bar.state + 
        '<button ng-click="getDirections('+bar.lat+', '+bar.lng+')">Get Directions</button>' +
        '</div>';
        marker.image = bar.image;
        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<a href="' + bar.url + '">' +'<h2 class="info-window">' + bar.name + '</h2>' + '</a>' +  marker.content);
            infoWindow.open($scope.map, marker);
        });

        $scope.markers.push(marker);

      }
    var i;  
    for (i = 0; i < $scope.bars.length; i++){
        createMarker($scope.bars[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    };
    $scope.getDirections= function(marker) {
          $scope.marker = marker;
          $scope.lat = $scope.marker.position.D;
          $scope.lng = $scope.marker.position.k;
          console.log($scope.lat);

          if (navigator.geolocation) { //Checks if browser supports geolocation          
            navigator.geolocation.getCurrentPosition(function (position) {  //This gets the
              var latitude = position.coords.latitude;                       //users current
              var longitude = position.coords.longitude;                    //location
              var start = new google.maps.LatLng(latitude, longitude);     //Creates variable for map coordinates
              var directionsService = new google.maps.DirectionsService();
              var directionsDisplay = new google.maps.DirectionsRenderer();
              directionsDisplay.setMap($scope.map);
              directionsDisplay.setPanel(document.getElementById('panel'));
              var request = {
                  origin: start,
                  destination: new google.maps.LatLng( $scope.lat, $scope.lng),
                  travelMode: google.maps.DirectionsTravelMode.TRANSIT
                };
             directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
              });
            });
          } else {
          //Browser doesn't support Geolocation
          handleNoGeolocation(false);
          } 
        };
        function handleNoGeolocation(errorFlag) {
              if (errorFlag) {
                var content = 'Error: The Geolocation service failed.';
              } else {
                content = 'Error: Your browser doesn\'t support geolocation.';
              }

              var options = {
                map: $scope.map,
                position: new google.maps.LatLng(60, 105),
                content: content
              };

              var infowindow = new google.maps.InfoWindow(options);
              map.setCenter(options.position);

    }
    }).
    error(function(data, status, headers, config) {
      console.log("Did not compute");
    });
})

Answer 1

我解决了这个问题。我在控制器内部错误地使用了getDir函数（显然）。

我删除了它，添加了地图作为参数，它的工作原理。但方向路径不会在地图上呈现。所以，如果有人对如何解决这个问题有任何想法...

角度连接方向服务

1 个答案: