Question

我正在尝试显示源和目标之间的路径，并尝试在此给定路径中移动图标。

我能够从源和目的地移动一个图标，但只有当图标移动时才会显示路径。

我希望整个路径在开头展示。

<!DOCTYPE html>
<html>
<head>
	<title>Animated route</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
		html, body, #map {
			height: 100%;
			margin: 0px;
			padding: 0px
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry"></script>
	<script>
        
		function initialize() {
			var map = new google.maps.Map(document.getElementById("map"), {
			  center: {lat: 17.416483, lng: 78.513592},
			  zoom: 13,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			
			getDirections(map);
		}

		function moveMarker(map, marker, latlng) {
			marker.setPosition(latlng);
			map.panTo(latlng);
		}

		function autoRefresh(map, pathCoords) {
			var i, route, marker;
			
			route = new google.maps.Polyline({
				path: [],
				geodesic : true,
				strokeColor: 'blue',
				strokeOpacity: 1.0,
				strokeWeight: 2,
				editable: false,
				map:map
			});
			
			marker=new google.maps.Marker({map:map, icon:"truck.png"});

			for (i = 0; i < pathCoords.length; i++) {				
				setTimeout(function(coords) {
					route.getPath().push(coords);
					moveMarker(map, marker, coords);
				}, 2000 * i, pathCoords[i]);
			}
		}
		
		function getDirections(map) {
			var directionsService = new google.maps.DirectionsService();
			
			var start = new google.maps.LatLng(17.416483, 78.513592);
			var end = new google.maps.LatLng(17.424643, 78.645126);
            var marker = new google.maps.Marker({
          position:   end,
          map: map,
         
        });
               var marker = new google.maps.Marker({
          position:  start ,
          map: map,
         icon:"http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        });


			var request = {
				origin:start,
				destination:end,
				travelMode: google.maps.TravelMode.DRIVING
			};
			directionsService.route(request, function(result, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					autoRefresh(map, result.routes[0].overview_path);
				}
			});
		}

		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>
<body>
	<div id="map"></div>
</body>
</html>

Answer 1

显示完整路线的最简单的解决方案是使用google.maps.DirectionRenderer，如果您不想要它的标记，请在其构造函数中使用suppressMarkers: true选项，您也可以设置折线的样式。

// create the directionsDisplay reference
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    suppressMarkers: true
  });
  // add it to the map
  getDirections(map);

然后用它来显示路线：

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
      autoRefresh(map, result.routes[0].overview_path);
    }
  });

代码段

<!DOCTYPE html>
<html>

<head>
  <title>Animated route</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry"></script>
  <script>
    var directionsDisplay;

    function initialize() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: {
          lat: 17.416483,
          lng: 78.513592
        },
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        suppressMarkers: true
      });
      getDirections(map);
    }

    function moveMarker(map, marker, latlng) {
      marker.setPosition(latlng);
      map.panTo(latlng);
    }

    function autoRefresh(map, pathCoords) {
      var i, route, marker;

      route = new google.maps.Polyline({
        path: [],
        geodesic: true,
        strokeColor: 'blue',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        editable: false,
        map: map
      });

      marker = new google.maps.Marker({
        map: map,
        icon: pinSymbol("blue")
      });

      for (i = 0; i < pathCoords.length; i++) {
        setTimeout(function(coords) {
          route.getPath().push(coords);
          moveMarker(map, marker, coords);
        }, 2000 * i, pathCoords[i]);
      }
    }

    function getDirections(map) {
      var directionsService = new google.maps.DirectionsService();

      var start = new google.maps.LatLng(17.416483, 78.513592);
      var end = new google.maps.LatLng(17.424643, 78.645126);
      var marker = new google.maps.Marker({
        position: end,
        map: map,

      });
      var marker = new google.maps.Marker({
        position: start,
        map: map,
        icon: pinSymbol("red")
      });


      var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
          autoRefresh(map, result.routes[0].overview_path);
        }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);


    function pinSymbol(color) {
      return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
      };
    }
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

如何使用google maps api在源和目标之间创建折线

1 个答案: