繪製地圖的路徑/使用谷歌地圖API和播放

Question

我試圖繪製訪問路徑映射路徑是通過演奏，如下面的例子中，航點：

當加載地圖我想要繪製的點A，B，C，D，E，然後F連接一個接一個。

我已經成功繪製了點，但我不能動態鏈接點。

這是我的代碼：

<script type="text/javascript"> 
var markers = [{ 
    "title": 'Alibaug', 
    "lat": '12.97721863', 
    "lng": '80.22206879', 
    "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' 
}, { 
    "title": 'Mumbai', 
    "lat": '12.9962529', 
    "lng": '80.2570098', 
    "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' 
}, { 
    "title": 'Pune', 
    "lat": '12.97722816', 
    "lng": '80.22219086', 
    "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' 
}]; 
window.onload = function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP,}; 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

    //*********** GOOGLE MAP SEARCH ****************// 
    // Create the search box and link it to the UI element. 
    var input = /** @type {HTMLInputElement} */ (
     document.getElementById('pac-input')); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    var searchBox = new google.maps.places.SearchBox(
     /** @type {HTMLInputElement} */ 
     (input)); 
    // Listen for the event fired when the user selects an item from the 
    // pick list. Retrieve the matching places for that item. 
    google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 

     for (var i = 0, marker; marker = markers[i]; i++) { 
      // marker.setMap(null); 
     } 

     // For each place, get the icon, place name, and location. 
     markers = []; 
     var bounds = new google.maps.LatLngBounds(); 
     var place = null; 
     var viewport = null; 
     for (var i = 0; place = places[i]; i++) { 
      var image = { 
       url: place.icon, 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: image, 
       title: place.name, 
       position: place.geometry.location 
      }); 
      viewport = place.geometry.viewport; 
      markers.push(marker); 

      bounds.extend(place.geometry.location); 
     } 
     map.setCenter(bounds.getCenter()); 
    }); 
    // Bias the SearchBox results towards places that are within the bounds of the 
    // current map's viewport. 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
     var bounds = map.getBounds(); 
     searchBox.setBounds(bounds); 
    }); 
    //***********Google Map Search Ends****************// 


    var infoWindow = new google.maps.InfoWindow(); 
    var lat_lng = new Array(); 
    var latlngbounds = new google.maps.LatLngBounds(); 
    for (i = 0; i < markers.length; i++) { 
     var data = markers[i] 
     var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
     lat_lng.push(myLatlng); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: data.title 
     }); 
     latlngbounds.extend(marker.position); 
     (function(marker, data) { 
      google.maps.event.addListener(marker, "click", function(e) { 
       infoWindow.setContent(data.description); 
       infoWindow.open(map, marker); 
      }); 
     })(marker, data); 
    } 
    map.setCenter(latlngbounds.getCenter()); 
    map.fitBounds(latlngbounds); 

    //***********ROUTING****************// 

    //Initialize the Path Array 
    var path = new google.maps.MVCArray(); 

    //Initialize the Direction Service 
    var service = new google.maps.DirectionsService(); 

    //Set the Path Stroke Color 
    var poly = new google.maps.Polyline({ 
     map: map, 
     strokeColor: '#4986E7' 
    }); 

    //Loop and Draw Path Route between the Points on MAP 
    for (var i = 0; i < lat_lng.length; i++) { 
     if ((i + 1) < lat_lng.length) { 
      var src = lat_lng[i]; 
      var des = lat_lng[i + 1]; 
      path.push(src); 
      poly.setPath(path); 
      service.route({ 
       origin: src, 
       destination: des, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function(result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
         path.push(result.routes[0].overview_path[i]); 
        } 
       } 
      }); 
     } 
    } 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
     'Error: The Geolocation service failed.' : 
     'Error: Your browser doesn\'t support geolocation.'); 
} 

輸出將類似於：

我怎麼能播放出沿着這條路徑映射點？有沒有工作的例子？

Answer 1

在https://duncan99.wordpress.com/2015/01/22/animated-paths-with-google-maps/有一個很好的博客文章，其中解釋瞭如何動畫路線。

這個例子和你的問題之間的區別是你有你的路線方式點。您可以使用方式點一次獲取整個路線，也可以像上面的代碼那樣獲取路線。我已經包含一個代碼片段，下面使用方式點（谷歌地圖的免費版本可用的最大8）。如果您在代碼中使用該方法，則需要確保在開始動畫之前加載了整個路徑。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Map Example</title> 
 
</head> 
 

 
<body> 
 
    <button id="animate">Redo Animation</button> 
 
    <div id="map_canvas" style="width: 600px;height: 600px"></div> 
 
    <script type="text/javascript"> 
 
    var markers = [{ 
 
     "title": 'Alibaug', 
 
     "lat": '18.6581725', 
 
     "lng": '72.8637616', 
 
     "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' 
 
    }, { 
 
     "title": 'Mumbai', 
 
     "lat": '19.0458547', 
 
     "lng": '72.9434202', 
 
     "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' 
 
    }, { 
 
     "title": 'Pune', 
 
     "lat": '18.5247663', 
 
     "lng": '73.7929273', 
 
     "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' 
 
    }]; 
 

 
    function animatePath(map, route, marker, pathCoords) { 
 
     var index = 0; 
 
     route.setPath([]); 
 
     for (var index = 0; index < pathCoords.length; index++) 
 
     setTimeout(function(offset) { 
 
      route.getPath().push(pathCoords.getAt(offset)); 
 
      marker.setPosition(pathCoords.getAt(offset)); 
 
      map.panTo(pathCoords.getAt(offset)); 
 
     }, index * 30, index); 
 
    } 
 

 
    function initialize() { 
 

 
     var mapOptions = { 
 
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
 
     zoom: 20, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 

 
     var infoWindow = new google.maps.InfoWindow(); 
 
     var latlngbounds = new google.maps.LatLngBounds(); 
 
     for (i = 0; i < markers.length; i++) { 
 
     var data = markers[i]; 
 
     markers[i].latLng = new google.maps.LatLng(data.lat, data.lng); 
 
     var marker = new google.maps.Marker({ 
 
      position: markers[i].latLng, 
 
      map: map, 
 
      title: data.title 
 
     }); 
 
     marker.description = markers[i].description; 
 
     latlngbounds.extend(marker.position); 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 
      infoWindow.setContent(this.description); 
 
      infoWindow.open(map, this); 
 
     }); 
 
     } 
 
     map.setCenter(latlngbounds.getCenter()); 
 
     map.fitBounds(latlngbounds); 
 

 
     //Initialize the Path Array 
 
     var path = new google.maps.MVCArray(); 
 

 
     //Initialize the Direction Service 
 
     var service = new google.maps.DirectionsService(); 
 

 
     // Get the route between the points on the map 
 
     var wayPoints = []; 
 
     for (var i = 1; i < markers.length - 1; i++) { 
 
     wayPoints.push({ 
 
      location: markers[i].latLng, 
 
      stopover: false 
 
     }); 
 
     } 
 
     //Initialize the path 
 
     var poly = new google.maps.Polyline({ 
 
     map: map, 
 
     strokeColor: '#4986E7' 
 
     }); 
 
     var traceMarker = new google.maps.Marker({ 
 
     map: map, 
 
     icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" 
 
     }); 
 

 
     if (markers.length >= 2) { 
 
     service.route({ 
 
      origin: markers[0].latLng, 
 
      destination: markers[markers.length - 1].latLng, 
 
      waypoints: wayPoints, 
 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(result, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
      for (var j = 0, len = result.routes[0].overview_path.length; j < len; j++) { 
 
       path.push(result.routes[0].overview_path[j]); 
 
      } 
 
      animatePath(map, poly, traceMarker, path); 
 
      } 
 
     }); 
 
     } 
 

 
     document.getElementById("animate").addEventListener("click", function() { 
 
     // Animate the path when the button is clicked 
 
     animatePath(map, poly, traceMarker, path); 
 
     }); 
 

 
    }; 
 
    </script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 
 
</body> 
 

 
</html>