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

답변

관련 문제