Question

我找到了一些可以在地图上移动汽车的代码。我想要的是，在与Google相同的持续时间内移动汽车。我的意思是，此功能对汽车运动的最佳实时响应是什么？现在，我只是使用了一个临时公式，但不确定该公式是否适用于每个测试用例。

var stepspeed = (legs[0].distance.value / legs[0].duration_in_traffic.value).toFixed(0);
step = stepspeed / 9;
var legs = response.routes[0].legs 
,Duration= legs[0].duration_in_traffic.value 
function animate(index, d, tick) {
if (d > eol[index]) {
        marker[index].setPosition(endLocation[index].latlng);
        return;
    }
    var nextDest = polyLine[index].GetPointAtDistance(d);
    map.panTo(nextDest);
    var lastPosn = marker[index].getPosition();
     var indx = polyLine[index].GetIndexAtDistance(d);
    for (var i = indx; i < polyLine[index].getPath().getArray().length - 1; i++) {
        myPolyPath.push(polyLine[index].getPath().getArray()[i]);
    }
    myPoly.setPath(myPolyPath);
    myPoly.setMap(map);
    marker[index].setPosition(nextDest);
   var heading = google.maps.geometry.spherical.computeHeading(lastPosn, nextDest);
    icon.rotation = heading;
    marker[index].setIcon(icon);
    updatePoly(index, d);
    timerHandle[index] = setTimeout("animate(" + index + "," + (d + step) + ")", tick || 100);
    myPolyPath = [];
}

Answer 1

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Google Map with Latitude and Longitude in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&key=yourkey&sensor=false&libraries=places">
</script>
<script type="text/javascript">
    var position = [40.748774, -73.985763];

    function initialize() {
        var latlng = new google.maps.LatLng(position[0], position[1]);
        var myOptions = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Latitude:" + position[0] + " | Longitude:" + position[1]
        });

        google.maps.event.addListener(map, 'click', function (event) {
            var result = [event.latLng.lat(), event.latLng.lng()];
            transition(result);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    //when time in seconds for 60
    var sec = 20;
    var totalmilitime = sec * 1000;
    var numDeltas = 100;
    var delay = totalmilitime / numDeltas; //milliseconds
    var i = 0;
    var deltaLat;
    var deltaLng;

    function transition(result) {
       
        i = 0;
        deltaLat = (result[0] - position[0]) / numDeltas;
        deltaLng = (result[1] - position[1]) / numDeltas;
        moveMarker();
    }

    function moveMarker() {
        position[0] += deltaLat;
        position[1] += deltaLng;
        var latlng = new google.maps.LatLng(position[0], position[1]);
        marker.setTitle("Latitude:" + position[0] + " | Longitude:" + position[1]);
        marker.setPosition(latlng);
        if (i != numDeltas) {
            i++;
            setTimeout(moveMarker, delay);
        }
    }

   // initialize();
</script>
    
     <style>
         #mapCanvas {
             width: 100%;
             height: 400px;
         }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        <div id="zoom_level"></div>
        <center>
            <!-- MAP HOLDER -->
            <div id="mapCanvas"></div>

            <!-- REFERENCES -->
            lat:<div id="lat"></div>
            lon:<div id="lon"></div>

        </center>

    </form>
</body>

</html>

使用javascript API以与Google预测的相同速度在地图上移动汽车

1 个答案: