当标记在地图上移动时,使标记面向正确的移动方向

时间:2016-01-17 12:54:35

标签: google-maps google-maps-api-3 google-maps-markers

我正在制作一个远足地图应用程序,在其中,我希望它在这里显示一个是朝向。This是地图

我所遵循的坐标是这种形式

42.42679066670903, -83.29210638999939,'south',40,'on'

其中south是我移动的方向,40是速度,on是移动传感器。为了尝试定位标记,我有四个图标用于北方,东,南,湿。图标已命名为blue_east_22.gif,blue_west_22.gif,blue_south_22.gif,blue_north_22.gif

这是代码

var map, marker, path, polylineCoords;
var startPos = [42.42679066670903, -83.29210638999939,'south',40,'on'];
var speed = 50; // km/h

var delay = 100;
// If you set the delay below 1000ms and you go to another tab,
// the setTimeout function will wait to be the active tab again
// before running the code.
// See documentation :
// https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs



function animateMarker(marker, coords, km_h)
{
    var target = 0;
    var km_h = km_h || 50;
    coords.push([startPos[0], startPos[1]]);

    function goToPoint()
    {
        var lat = marker.position.lat();
        var lng = marker.position.lng();
        var step = (km_h * 1000 * delay) / 3600000; // in meters

        addCoord(lat, lng);

        var dest = new google.maps.LatLng(
        coords[target][0], coords[target][1]);

        var distance =
        google.maps.geometry.spherical.computeDistanceBetween(
        dest, marker.position); // in meters

        var numStep = distance / step;
        var i = 0;
        var deltaLat = (coords[target][0] - lat) / numStep;
        var deltaLng = (coords[target][1] - lng) / numStep;

    function moveMarker() {
    lat += deltaLat;
    lng += deltaLng;
    i += step;

    if (i < distance) {
            marker.setPosition(new google.maps.LatLng(lat, lng));
            map.setCenter(marker.getPosition());
            setTimeout(moveMarker, delay);
        } else {
            marker.setPosition(dest);
            map.setCenter(marker.getPosition());
            target++;
            if (target == coords.length) {
                target = 0;
        }

        setTimeout(goToPoint, delay);
    }
}
        moveMarker();
    }
    goToPoint();
}

//To add a Point on the polyline call
function addCoord(lat, lng) {
   var point = new google.maps.LatLng(lat, lng);
   var coords = path.getPath();
   coords.push(point);
}

function initialize()
{
    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(42.425175091823974, -83.2943058013916,'south',40,'on'),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var icon = {
    url: 'assets/images/blue_west_22.gif',
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0,30)
};
var data = "<b>Current Speed</b> ::::: <b>Current Coordinates</b>";
    var infowindow = new google.maps.InfoWindow({
      content: data
    });

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(startPos[0], startPos[1]),
        icon: icon,
        title:"Info",
        map: map
    });


    google.maps.event.addListenerOnce(map, 'idle', function()
    { 
    infowindow.open(map,marker),
        animateMarker(marker, [
            // The coordinates of each point you want the marker to go to.
            // You don't need to specify the starting position again.
            [42.42666395645802, -83.29694509506226,'south',40,'on'],
            [42.42300508749226, -83.29679489135742,'east',60,'on'],
            [42.42304468678425, -83.29434871673584,'north',89,'on'],
            [42.424882066428424, -83.2944130897522,'east',44,'on'],
            [42.42495334300206, -83.29203128814697,'north',0,'off']
        ], speed);
    });

    polylineCoords = [];

    var startCoords = new google.maps.LatLng(startPos[0], startPos[1]);

    polylineCoords.push(startCoords);

    path = new google.maps.Polyline({
      path: polylineCoords,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    path.setMap(map);
}

initialize();

如何使图标在沿谷歌地图移动时朝向正确的方向?

0 个答案:

没有答案