javascript - 为什么 AngularJS 在谷歌地图中显示标记而不是路线？

Question

在 map 上放置标记后，我还应该让它们连接在一起，看起来像路线然而，结果只显示标记，根本没有路线。真是令人困惑。实际上，我首先设置了 map ，然后在 map 上添加了标记和路线。然而，它只显示标记

var cities = [
              {
                  place : 'Universal Studio',
                  desc : 'A place full of fun',
                  lat : 34.135557,
                  long : -118.354639
              },
              {
                  place : 'Beverly Hill',
                  desc : 'Shooping Center',
                  lat : 34.073572,
                  long : -118.399767
              },
              {
                  place : 'Staples Center',
                  desc : 'City of Joy...',
                  lat : 34.043284,
                  long : -118.267254
              },
              /*{
                  place : 'Mumbai',
                  desc : 'Commercial city!',
                  lat : 19.000000,
                  long : 72.90000
              },
              {
                  place : 'Bangalore',
                  desc : 'Silicon Valley of India...',
                  lat : 12.9667,
                  long : 77.5667
              }*/
          ];
var roadroute=[
             





           ];
		  
		  

          //Angular App Module and Controller
          var mapApp = angular.module('mapApp', []);
          mapApp.controller('MapController', function ($scope) {
              
              var mapOptions = {
                  zoom: 10,
                  center: new google.maps.LatLng(34.090655,-118.339585),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }

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

              $scope.markers = [];
              
              var infoWindow = new google.maps.InfoWindow();
              
              var createMarker = function (info){
                  
                  var marker = new google.maps.Marker({
                      map: $scope.map,
                      position: new google.maps.LatLng(info.lat, info.long),
                      title: info.place
                  });
                  marker.content = '<div class="infoWindowContent">' + info.desc + '<br />' + info.lat + ' E,' + info.long +  ' N, </div>';
                  
                  google.maps.event.addListener(marker, 'click', function(){
                      infoWindow.setContent('<h2>' + marker.title + '</h2>' + 
                        marker.content);
                      infoWindow.open($scope.map, marker);
                  });
                  
                  $scope.markers.push(marker);
                  
              }

              //create route
			  
			 
			$scope.ChileTrip1=[];
            for (k=0;k < cities.length;k++){
				
				$scope.ChileTrip1[k]=new google.maps.LatLng(cities[k].lat,cities[k].long);
				
				
				
			}

            //end			  
              
              for (i = 0; i < cities.length; i++){
                  createMarker(cities[i]);
              }
			  
			  
			  //add route
			 $scope.traceChileTrip1=new google.maps.Polyline({
				path:$scope.ChileTrip1,
				strokeColor:"blue",
				strokeOpacity:1.0,
				strokeWeight:2
				 
			  });
			  $scope.service1 = new google.maps.DirectionsService(),$scope.traceChileTrip1, snap_path1 = [];
             
			  
			  $scope.traceChileTrip1.setMap(map);
				
				
			 for (j = 0; j < $scope.ChileTrip1.length - 1; j++) {
                       $scope.service1.route({
                            origin: $scope.ChileTrip1[j],
                            destination: $scope.ChileTrip1[j + 1],
                            travelMode: google.maps./*Directions*/TravelMode.DRIVING
                            }, function (result, status) {
                                  if (status == google.maps.DirectionsStatus.OK) {
                                      snap_path1 = snap_path1.concat(result.routes[0].overview_path);
                                      $scope.traceChileTrip1.setPath(snap_path1);
                                  } else console.log("Directions request failed: " + status);
                       });
                     }
				
				
				
			  
			  
			  //end

              $scope.openInfoWindow = function(e, selectedMarker){
                  e.preventDefault();
                  google.maps.event.trigger(selectedMarker, 'click');
              }

          });

<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<meta charset="ISO-8859-1">
<title>Maps in AngularJS</title>
<link rel="stylesheet" href="map.css">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="map.js"></script>
</head>
<body>
<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div ng-controller="MapController">
         <div id="map"></div>
         <div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
            <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
            <label id="names" >{{marker.title}}</label></a>
         </div>
		 
		 
       </div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
});
</script>



</body>
</html>

Answer 1

您在以下行中错过了 $scope:

$scope.traceChileTrip1.setMap($scope.map);

这是更新后的代码的 Plunker:

http://plnkr.co/edit/OLquFu3jxdyaGEzjoqty?p=preview