Google Maps Javascript API V3中的旋转标记

Question

Google Maps Javascript API V3中的旋转标记

Fix*_*rod 1 javascript google-maps-api-3

我没有做很多编码,但我试着写一些我认为会通过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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

geo*_*zip 7

由于很难预测未来,如果您没有GPS设备的实时航向,请使用上一个点和更新的点.如果它不移动(或移动速度不够快),那将不会特别准确.

function updateMarker(marker, latitude, longitude, label) {
  var prevPosn = marker.getPosition();
  marker.setPosition(
    new google.maps.LatLng(
      latitude,
      longitude
    )
  );
  marker.setIcon({
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    strokeColor: 'red',
    strokeWeight: 3,
    scale: 6,
    rotation: google.maps.geometry.spherical.computeHeading(prevPosn, marker.getPosition())
  })
  if (label) {
    marker.setTitle(label);
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	7862 次
最近记录：	7 年，8 月前