Google Maps Javascript API V3中的旋转标记

Question

我没有做很多编码，但是我试着编写一些我认为会通过phonegap / cordova运行的简单代码。现在我想要它做的就是找到我，当我移动/行走/驾驶时，将标记保持在我的位置，并沿着我用标准三角形SVG Google标记行进的方向旋转。

我真的很难弄清楚旋转/方位/航向，因为我没有最终目的地或多边形线。现在我把它定位好了，把标记放在地图上，更新正常并将标记保持在中心。当然，我会为此添加更多内容，但这是我遇到麻烦的部分。我在旋转部分的代码中放了一个*** //我试图修复我认为可能有效的代码。我可能会把它变成一个名为heading的变量，但它显示了这个概念。

我的问题是我不知道怎么去往来自latlng。我正在使用navigator.geolocation.watchPosition来跟踪位置变化，所以我不知道如何获得以前的latlng。此外，如果有一种更容易的方法来做我一般都想做的事情，我都是耳朵。我觉得我已经过度思考了这一点，但也许它确实需要这一切。

我删除了我的api代码，但除此之外，这一切都按原样运行。

 <!DOCTYPE html>
<html>
<head>
    <title>GEOCODING TEST</title>
    <style type="text/css">

        html,
        body {
            height: 100% ;
            margin: 0px 0px 0px 0px ;
            overflow: hidden ;
            padding: 0px 0px 0px 0px ;
            width: 100% ;
            }

        #mapContainer {
            height: 100% ;
            width: 100% ;
            }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key={MYAPIKEY}" type=
    "text/javascript">
    </script>
    <script src=
    "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type=
    "text/javascript">
    </script>
</head>

<body>
    <div id="mapContainer">
    </div>
    <script type="text/javascript">
        var mapContainer = $( "#mapContainer" );    
        map = new google.maps.Map(
            mapContainer[ 0 ],
            {
                zoom: 15,
                center: new google.maps.LatLng(
                    40.700683,
                    -73.925972
                ),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }
        );

        function addMarker (latitude, longitude){
                var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(
                    latitude,
                    longitude
                ),
                flat: true,
                icon: {
                   path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                   strokeColor : 'red',
                   strokeWeight : 3,
                   scale: 6,
                   ***//rotation: google.maps.geometry.spherical.computeHeading(from:LatLng, to:LatLng)
                 },
        });

        return( marker );


        }
        function updateMarker( marker, latitude, longitude, label ){

            marker.setPosition(
                new google.maps.LatLng(
                    latitude,
                    longitude
                )

            );

            if (label){

                marker.setTitle( label );

            }
        }

        if (navigator.geolocation) {

            var locationMarker = null;
            navigator.geolocation.getCurrentPosition(
                function( position ){
                    if (locationMarker){
                        return;
                    }
                    console.log( "Initial Position Found" );

                    locationMarker = addMarker(
                        position.coords.latitude,
                        position.coords.longitude,
                        "Initial Position"
                    );

                },
                function( error ){
                    console.log( "Something went wrong: ", error );
                },
                {
                    timeout: (5 * 1000),
                    maximumAge: (1000 * 60 * 15),
                    enableHighAccuracy: true
                }
            );

            var positionTimer = navigator.geolocation.watchPosition(
                function( position ){

                    console.log( "Newer Position Found" );
                    console.log (position);

                    updateMarker(
                        locationMarker,
                        position.coords.latitude,
                        position.coords.longitude,
                        "Updated / Accurate Position"
                    );
            var pos = new google.maps.LatLng(
                 position.coords.latitude, 
                 position.coords.longitude);   

      map.setCenter(pos);


                }
            );

            setTimeout(
                function(){
                    // Clear the position watcher.
                    navigator.geolocation.clearWatch( positionTimer );
                },
                (1000 * 60 * 5)
            );

        }

    </script>

    <div id="map-canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

Answer 1

另一答案