个人中心
gpt4 book ai didi

javascript - Google Maps Javascript API V3 中的旋转标记

转载 作者：行者123 更新时间：2023-11-30 07:21:42 29 4
gpt4 key购买 nike

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

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

我的问题是我不知道如何获取经纬度。我正在使用 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>

最佳答案

由于很难预测 future ，如果您没有来自 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);
  }
}

关于javascript - Google Maps Javascript API V3 中的旋转标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38670309/

29 4 0
文章推荐： java - PowerMock:正确使用 Whitebox.invokeMethod(...) 将 Object[] 作为参数的方法
文章推荐： java - 接收java.sql.SQLException : Invalid column index error while invoking database function
文章推荐： java - JSP 的文件名包含指令以避免编译它们
文章推荐： java - 如何为Spring Integration提供转换器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com