google maps api

-1

私は、ソースと宛先の間のパスを表示しようとしていると、この特定のパスでアイコンを移動しようとしているソースと宛先の間にポリラインを作成しています。google maps api

アイコンは移動元と移動先から移動できましたが、アイコンが移動している場合にのみパスが表示されます。

私は全体のパスを最初に表示します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Animated route</title> 
 
\t <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
\t <meta charset="utf-8"> 
 
\t <style> 
 
\t \t html, body, #map { 
 
\t \t \t height: 100%; 
 
\t \t \t margin: 0px; 
 
\t \t \t padding: 0px 
 
\t \t } 
 
\t </style> 
 
\t <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry"></script> 
 
\t <script> 
 
     
 
\t \t function initialize() { 
 
\t \t \t var map = new google.maps.Map(document.getElementById("map"), { 
 
\t \t \t center: {lat: 17.416483, lng: 78.513592}, 
 
\t \t \t zoom: 13, 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t getDirections(map); 
 
\t \t } 
 

 
\t \t function moveMarker(map, marker, latlng) { 
 
\t \t \t marker.setPosition(latlng); 
 
\t \t \t map.panTo(latlng); 
 
\t \t } 
 

 
\t \t function autoRefresh(map, pathCoords) { 
 
\t \t \t var i, route, marker; 
 
\t \t \t 
 
\t \t \t route = new google.maps.Polyline({ 
 
\t \t \t \t path: [], 
 
\t \t \t \t geodesic : true, 
 
\t \t \t \t strokeColor: 'blue', 
 
\t \t \t \t strokeOpacity: 1.0, 
 
\t \t \t \t strokeWeight: 2, 
 
\t \t \t \t editable: false, 
 
\t \t \t \t map:map 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t marker=new google.maps.Marker({map:map, icon:"truck.png"}); 
 

 
\t \t \t for (i = 0; i < pathCoords.length; i++) { \t \t \t \t 
 
\t \t \t \t setTimeout(function(coords) { 
 
\t \t \t \t \t route.getPath().push(coords); 
 
\t \t \t \t \t moveMarker(map, marker, coords); 
 
\t \t \t \t }, 2000 * i, pathCoords[i]); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t function getDirections(map) { 
 
\t \t \t var directionsService = new google.maps.DirectionsService(); 
 
\t \t \t 
 
\t \t \t var start = new google.maps.LatLng(17.416483, 78.513592); 
 
\t \t \t 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" 
 
     }); 
 

 

 
\t \t \t var request = { 
 
\t \t \t \t origin:start, 
 
\t \t \t \t destination:end, 
 
\t \t \t \t travelMode: google.maps.TravelMode.DRIVING 
 
\t \t \t }; 
 
\t \t \t directionsService.route(request, function(result, status) { 
 
\t \t \t \t if (status == google.maps.DirectionsStatus.OK) { 
 
\t \t \t \t \t autoRefresh(map, result.routes[0].overview_path); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 

 
\t \t google.maps.event.addDomListener(window, 'load', initialize); 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <div id="map"></div> 
 
</body> 
 
</html>

出典

2017-10-26 pushplata patel

のような何か【この例]（HTTP：// www.geocodezip.com/v3_animate_marker_directions.html）？ – geocodezip

@geocodezip ....はい、正確には表示したコードの全体をコピーしたくない場合は、パスを表示するコードブロックを教えてください。 –

完全なルートを表示するための最も簡単な解決策は、あなたはそれがマーカーをだしたくない場合は、コンストラクタでsuppressMarkers: trueオプションを使用し、google.maps.DirectionRendererを使用することで、あなたにポリラインのスタイルを設定することができますよく

// 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>

出典

2017-10-28 23:52:30 geocodezip

答えて

関連する問題