Google Maps Javascript API V3中的旋转标记

问题描述 投票：1回答：2

我没有做很多编码，但是我试着编写一些我认为会通过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>
javascript google-maps-api-3
2个回答
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);
  }
}
1
投票

为此目的创建了一个谷歌库，它被称为Geometry Libray。

此库中包含一组导航功能，可以帮助您计算距离，航向等。

你可以找到一个明确的例子here：

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 34, lng: -40.605}
        });

        map.controls[google.maps.ControlPosition.TOP_CENTER].push(
            document.getElementById('info'));

        marker1 = new google.maps.Marker({
          map: map,
          draggable: true,
          position: {lat: 40.714, lng: -74.006}
        });

        marker2 = new google.maps.Marker({
          map: map,
          draggable: true,
          position: {lat: 48.857, lng: 2.352}
        });

        var bounds = new google.maps.LatLngBounds(
            marker1.getPosition(), marker2.getPosition());
        map.fitBounds(bounds);

        google.maps.event.addListener(marker1, 'position_changed', update);
        google.maps.event.addListener(marker2, 'position_changed', update);

        poly = new google.maps.Polyline({
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 3,
          map: map,
        });

        geodesicPoly = new google.maps.Polyline({
          strokeColor: '#CC0099',
          strokeOpacity: 1.0,
          strokeWeight: 3,
          geodesic: true,
          map: map
        });

        update();
      }

该折线是连接出发点和目的地点的虚拟线。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.