Сейчас я делаю, чтобы внедрить обновленный сервис навигации геолокации карт в реальном времени, используя javascript apis и HTML.
Теперь я работал, который показывает мою позицию (точка 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 на улице / дороге маркер перемещался на карте в режиме реального времени (как навигатор) без перезагрузки моего браузера. Как я могу это сделать?