Question

现在，我正在使用JavaScript API和HTML来实施Google Maps地理位置实时实时导航更新导航服务。

现在我的工作可以显示我的位置（A点）和当前地址（b点），但是需要重新加载浏览器以更新我的地理位置。

在进行过程中，如何由他自己实时更新此地图。我要添加的是地图上的实时更新路线。这是我工作的完整代码，将其复制到notpad ++或其他HTML书写板上，并保存为.html扩展文件，并在Firefox浏览器上进行检查。

这是我在埃塞俄比亚的竞赛项目，目的是在一些公司和组织中实施。我想当我移至街道上的B点时，标记会实时（例如导航器）在地图上移动，而无需重新加载浏览器。我怎样才能做到这一点？送我一个人完成，或告诉我该怎么办。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Jimma Real time Direction</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
     <link href="app.css" rel="stylesheet"></link>


    <style>
        div.location {
             width: 100%;
             height: 400px;
        }
    </style>    
</head>
<body>
<div class="header">
      <h1>Get your Real time Direction!</h1>
    </div>
    <div id="name-box" class="name-box">
        <h3>reload your browser to update your direction when you move!</h3>
      </div>


    <div id="page">
        <div class="location"></div>
    </div>
    <!-- [/page] -->
    <script> 

        (function ( $ ) {
            $.fn.GeoLocation = function( options ) {
                var settings = $.extend({
                    home: { latitude: 7.667608, longitude: 36.841001 },
                }, options );

                var home = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);

                return this.each(function() {   
                    var element = $(this);
                    element.text('Attempting to find your location');


                    function displayCurrentPosition(data) {
                        element.html('<div class="map-canvas"></div>');

                        var current = new google.maps.LatLng(data.coords.latitude, data.coords.longitude);

                        var options = {
                            center: current,
                            mapTypeId: google.maps.MapTypeId.HYBRID,
                            zoom: 10,
                        };

                        var map = new google.maps.Map(element[0], options);

                        var directions = {
                            origin: current,
                            destination: home,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        };

                        display = new google.maps.DirectionsRenderer({ map: map });

                        service = new google.maps.DirectionsService();
                        service.route(directions, function(response, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                display.setDirections(response);
                            }
                            else
                                alert ('failed to get directions');
                        });
                    }


                    function onError(error) {
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                element.text('Access to location API denied by user');
                                break;
                            case error.POSITION_UNAVAILABLE:
                                element.text('Unable to determine location');
                                break;
                            case error.TIMEOUT:
                                element.text('Unable to determine location, the request timed out');
                                break;
                            case error.UNKNOWN_ERROR:
                                element.text('An unknown error occurred!');
                                break;
                        }
                    }

                    if(navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(displayCurrentPosition, onError);
                    } else {
                        element.text('Geolocation is not supported by this browser, please upgrade to a more recent version');
                    }
                });

            };

        }( jQuery ));

        jQuery(document).ready(function() {
            jQuery('div.location').GeoLocation();
        });

    </script>

</body>
</html>

我希望当我移至街道/道路上的B点时，标记会实时（例如导航器）在地图上移动，而无需重新加载浏览器。我怎样才能做到这一点？

地理位置实时更新依次导航javascript

0 个答案: