Atualização de maps do google sem refresh
Olá galerinha, estou com um sistema para rastreamento veicular e nele tenho toda a API do Maps para geolocalização, porém, meu sistema não consegue rastrear um veiculo e atualizar a localização do mesmo em tempo real, ou seja, mudando os pontos onde o veículo se encontra naquele determinado momento, tendo que atualizar a página manualmente para poder visualizar a atual posição do veículo, mandarei meu código API para análise, em cima dele obtive outro problema, no meu sistema eu faço um select para selecionar o usuário, ao selecionar o mapa já me traz a localização do mesmo, o que acontece, já tentei um código para atualizar a página sem refresh, mas quando isso acontece o sistema perde as informações do usuário logado e some com a localização do mesmo. Se alguém poder me ajudar com isso, serei muito grato. Desde já obrigado!
<script type="text/javascript">
var directionsDisplay;
var markerArray = [];
var markerArrayHist = [];
var marcadores = [];
/**
* [directionsService Inicializa o servico de rotas]
* @type {Google Object}
*/
var directionsService = new google.maps.DirectionsService();
/**
* [icons Define os ícones personalizados das rotas]
* @type {Google Object}
*/
var icons = {
start: new google.maps.MarkerImage(
'imagens/marker_start.png', // URL
new google.maps.Size( 48, 48 ), // (width,height)
new google.maps.Point( 0, 0 ), // The origin point (x,y)
new google.maps.Point( 22, 32 ) // The anchor point (x,y)
),
end: new google.maps.MarkerImage(
'imagens/marker_finish.png', // URL
new google.maps.Size( 40, 40 ), // (width,height)
new google.maps.Point( 0, 0 ), // The origin point (x,y)
new google.maps.Point( 22, 32 ) // The anchor point (x,y)
)
}
/**
* [var_location Variável que define a posição de centralização]
* @type {Google Object}
*/
var var_location = new google.maps.LatLng(-13.496473,-55.722656);
/**
* [var_mapoptions Define as opções do mapa]
* @type {Google Object}
*/
var var_mapoptions = {
zoom: 5,
center: var_location,
navigationControl: true,
rotateControl: 45,
rotateControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_CENTER
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/**
* [var_map Cria efetivamente o objeto 'mapa' com base nas informações passadas]
* @type {Google Object}
*/
var var_map = new google.maps.Map(document.getElementById("map-canvas"),var_mapoptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(var_map);
/**
* [init_map Inicializa a API do Google Maps]
* @return {[strings]} [Variáveis com os parâmetros de inicialização]
*/
function init_map() {
/**
* [directionsDisplay Define as opções padrão de visualização das rotas]
* @type {Google Object}
*/
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
directionsDisplay.setMap(var_map); //Atrela as opções de inicialização ao mapa
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
/**
* BOTÃO PERSONALIZADO DO STREET VIEW
*/
// Get close button and insert it into streetView
// #button can be anyt dom element
var closeButton = document.querySelector('#close-street'),
controlPosition = google.maps.ControlPosition.RIGHT_CENTER;
// Assumes map has been initiated
var streetView = var_map.getStreetView();
// Hide useless and tiny default close button
streetView.setOptions({ enableCloseButton: false });
// Add to street view
streetView.controls[ controlPosition ].push( closeButton );
// Listen for click event on custom button
// Can also be $(document).on('click') if using jQuery
google.maps.event.addDomListener(closeButton, 'click', function(){
streetView.setVisible(false);
});
}
google.maps.event.addDomListener(window, 'load', init_map);
var thePanorama = var_map.getStreetView();
google.maps.event.addListener(thePanorama, 'visible_changed', function() {
if (thePanorama.getVisible()) {
$('#close-street').removeClass('hide');
} else {
$('#close-street').addClass('hide');
}
});
/**
* [calcRoute Traça a rota no mapa e no intinerário]
* @return {void}
*/
function calcRoute() {
$('#calculaRota i').removeClass('fa-road').addClass('fa-refresh fa-spin');
// Retrieve the start and end locations and create
// a DirectionsRequest using directions.
var start = document.getElementById('inicio_rota').value;
var end = document.getElementById('destino_rota').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
limparMapa();
// Route the directions and pass the response to a function to create markers
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var leg = response.routes[0].legs[0];
makeMarker( leg.start_location, icons.start, "Ponto de Saída" );
makeMarker( leg.end_location, icons.end, 'Ponto de Chegada' );
$('#calculaRota').addClass('btn-success');
$('#calculaRota > i').removeClass('fa-refresh fa-spin').addClass('fa-check');
setTimeout(function () {
$('#calculaRota').removeClass('btn-success');
$('#calculaRota > i').removeClass('fa-check').addClass('fa-road');
}, 3000);
}
else {
$('#calculaRota').addClass('btn-danger');
$('#calculaRota > i').removeClass('fa-refresh fa-spin').addClass('fa-times');
setTimeout(function () {
$('#calculaRota').removeClass('btn-danger');
$('#calculaRota > i').removeClass('fa-times').addClass('fa-road');
}, 3000);
alert('Não foi possível calcular a rota: ' + status);
$('#inicio_rota').focus();
}
});
}
/**
* [tracarHistorico Desenha as rotas do histórico no mapa principal]
* @param {array} markers Contém a latitude e longitude de cada posicao da tabela de histórico
*/
function tracarHistorico () {
limparMapaHist();
markers = posicoes;
path = new google.maps.MVCArray();
poly = new google.maps.Polyline({
map: var_map,
strokeColor: '#4986E7'
});
waitingDialog.show('Traçando Mapa. Por favor aguarde.');
intervalTraceRoute = setInterval(function (){ drawNewAnimatedMap();},1500)
$('#modal-historico').modal('toggle');
$("#historico .header").click();
$('#erase-trace').parent('.clear-trace').removeClass('hide');
$('#erase-trace').click(function () {
for (var i = 0; i < lat_lng.length; i++) {
lat_lng.splice(i, 1);
}
limparMapaHist();
console.log(markerArrayHist.length);
path.clear();
});
}
/**
* [makeMarker Criação de marcadores -- atualmente somente para ROTAS]
* @param {string} position Latitude e longitude do ponto
* @param {Google Object} icon Ícones personalizados das rotas
* @param {string} title Nome do title que será exibido no hover do marcador
* @param {boolean} retorna Se o objecto marcador criado deverá ser retornado
*/
function makeMarker (position, icon, title, retorna) {
var marker = new MarkerWithLabel({
position: position,
map: var_map,
draggable: true,
raiseOnDrag: true,
labelContent: title,
icon: icon,
animation: google.maps.Animation.DROP,
labelAnchor: new google.maps.Point(20, 11),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
markerArray.push(marker);
if (retorna) return marker;
}
/**
* [verNoMapa Visualiza aquela localização mostrada no Histórico]
* @param {float} lat Latitude em decimal degrees
* @param {float} lon Longitude em decimal degrees
*/
function verNoMapa (lat, lon) {
var image = 'imagens/coordenada.png';
var posHist = new google.maps.LatLng(lat, lon);
var pointMarker = new google.maps.Marker({
position: posHist,
map: var_map,
icon: image,
animation: google.maps.Animation.DROP
});
markerArrayHist.push(pointMarker);
pointMarker.setMap(var_map);
var_map.setZoom(15);
var_map.panTo(posHist);
}
/**
* [limparMapa "Zera" as informações contidas no mapa]
*/
function limparMapa () {
var j = 0;
// Repete o processo de limpeza 3 vezes
// Contorna o BUG que mantém posiçoes nos arrays em algumas situações
while (j < 3) {
for (i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null); // Primeiro, remove todos os marcadores existentes no mapa.
marcadores.splice(i, 1);
markerArray.splice(i, 1);
}
for (var i = 0; i < markerArrayHist.length; i++) {
markerArrayHist[i].setMap(null);
markerArrayHist.splice(i, 1);
}
j++;
}
markerArray = []; // Agora, limpa o array em si.
markerArrayHist = [];
marcadores = [];
directionsDisplay.setDirections({routes: []}); //Remove o traçado das rotas
$("#slide-panel").addClass('hide'); // Remove o botão de collapse do itinerário de rotas
$("#inicio_rota").val(""); //Apaga os inputs de rotas
$("#destino_rota").val(""); //Apaga os inputs de rotas
}
function limparMapaHist () {
var j = 0;
// Repete o processo de limpeza 3 vezes
// Contorna o BUG que mantém posiçoes nos arrays em algumas situações
while (j < 3) {
for (var i = 0; i < markerArrayHist.length; i++) {
markerArrayHist[i].setMap(null);
markerArrayHist.splice(i, 1);
}
j++;
}
markerArrayHist = [];
}
/**
* [imagemSinal Atualiza o status do sinal do veículo]
* @param {char} sinal Caracter contendo o status do sinal [R]astreando | [D]esligado | [S]em sinal
* @return {[string]} [Caminho da imagem a ser adicionada de acordo com o status do sinal]
*/
function imagemSinal (sinal) {
switch (sinal) {
case 'R':
var caminho = 'imagens/status_rastreando.png';
break;
case 'D':
var caminho = 'imagens/status_desligado.png';
break;
case 'S':
var caminho = 'imagens/status_rastreando.png';
break;
}
return ("<img src='" + caminho + "' alt='Status do Sinal'>");
}
var posVeiculoCerca;
/**
* [alterarComboVeiculo Marca o veículo ou grupo selecionado no mapa]
* @param {string} imei Número do IMEI do veículo ou ID do grupo
*/
function alterarComboVeiculo (imei) {
limparMapa();
if (imei) {
$.ajax({
url: "dados_veiculo.php",
type: "GET",
data: { filtro: imei },
success: function (aDados) {
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
var enderecos = new Array();
var endereco;
var aDados = eval('('+aDados+')');
for (var i = 0; i < aDados.length; i++) {
var dados = aDados[i];
if (dados.sinal == 'D') {
var imgTipo = '_inativo.png';
}
else if (dados.block == 'S') var imgTipo = '_bloqueado.png';
else var imgTipo = '_ativo.png';
switch (dados.tipo) {
case 'MOTO':
var image = 'imagens/marker_moto' + imgTipo;
break;
case 'CARRO':
var image = 'imagens/marker_carro' + imgTipo;
break;
case 'JET':
var image = 'imagens/marker_jet' + imgTipo;
break;
case 'CAMINHAO':
var image = 'imagens/marker_caminhao' + imgTipo;
break;
case 'VAN':
var image = 'imagens/marker_van' + imgTipo;
break;
case 'PICKUP':
var image = 'imagens/marker_pickup' + imgTipo;
break;
case 'ONIBUS':
var image = 'imagens/marker_onibus' + imgTipo;
break;
case 'TRATOR':
var image = 'imagens/marker_truck' + imgTipo;
break;
default:
var image = 'imagens/marker_carro' + imgTipo;
break;
}
var myLatLng = new google.maps.LatLng(dados.latitude, dados.longitude);
var pointMarker = makeMarker(myLatLng, image, dados.name, true);
// marca posição do veiculo para quando escolher a cerca
posVeiculoCerca = new google.maps.LatLng(dados.latitude, dados.longitude);
// OBTÉM O ENDEREÇO
geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': myLatLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
dados.endereco = results[0].formatted_address;
}
else
{
dados.endereco = status;
}
});
google.maps.event.addListener(pointMarker, 'click', (function(pointMarker, i) {
// OBTÉM O ENDEREÇO
return function() {
$('#info-veiculo').modal('toggle');
}
})(pointMarker, i));
/*google.maps.event.addListener(pointMarker, 'click', function(e){
var infoWindow = new google.maps.InfoWindow({
position: myLatLng,
content:"<div id='bodyContent' style='text-align:left'><p><b>Placa:</b> "+dados.name+"<br><b>Endereço:</b> "+dados.endereco+"<br><b>IMEI:</b> "+dados.imei+"<br><b>Chip: </b>"+dados.identificacao+"<br><b>Identificação: </b>"+dados.apelido+"<br><b>Rastreador: </b>"+dados.modelo+"</p></div>"
});
infoWindow.open(var_map);
});*/
marcadores.push(dados);
}
var_map.panTo(myLatLng);
// Caso seja visualização de GRUPO, define um zoom menor
// Se for apenas um veículo, define um zoom maior e coloca as informações do hodometro
if (aDados.length > 1) var_map.setZoom(10);
else {
$('li.status-sinal').html(imagemSinal(dados.sinal));
$('li.status-ignicao').html(estadoIgnicao);
var_map.setZoom(15);
exibirListagemHistorico(imei);
$.ajax({
url: "menu_hodometro.php",
type: "GET",
data: { acao: 'hodometro_atual', imei: imei },
dataType: "JSON",
success: function (infoHodometro) {
$('#hod_atual').val(infoHodometro.hodometro);
$('#alerta_hodometro').val(infoHodometro.alerta_hodometro);
}
});
}
}
});
}
else posicionaHistorico();
}
/**
* [autoReload Atualiza automaticamente a posição dos marcadores a cada 1 min (se houver marcadores)]
*/
function autoReload () {
if (markerArray.length > 0) {
for (var i = 0; i < markerArray.length; i++) {
//console.log('marker ' + i);
//atualizar historico
$.ajax({
url: "listagem_nova_interface.php",
type: "GET",
data: { 'imei': marcadores[i].imei },
success: function (result) {
$("#historico .content table tbody").html(result);
}
});
$.ajax({
url: "dados_veiculo.php",
data: { posicao: marcadores[i].imei},
success: function (coordenadas) {
var coordenadas = eval('('+coordenadas+')');
for (var i = 0; i < coordenadas.length; i++) {
//console.log('coordenada '+ i);
// DEFINE A NOVA POSIÇÃO
var novaPos = new google.maps.LatLng(coordenadas[i].latitude, coordenadas[i].longitude);
markerArray[i].setPosition(novaPos);
// DEFINE O NOVO ICONE QUE SERÁ UTILIZADO
var dados = coordenadas[i];
if (dados.sinal == 'S' || dados.sinal == 'D') {
var imgTipo = '_inativo.png';
}
else if (dados.block == 'S') var imgTipo = '_bloqueado.png';
else var imgTipo = '_ativo.png';
switch (dados.tipo) {
case 'MOTO':
var image = 'imagens/marker_moto' + imgTipo;
break;
case 'CARRO':
var image = 'imagens/marker_carro' + imgTipo;
break;
case 'JET':
var image = 'imagens/marker_jet' + imgTipo;
break;
case 'CAMINHAO':
var image = 'imagens/marker_caminhao' + imgTipo;
break;
case 'VAN':
var image = 'imagens/marker_van' + imgTipo;
break;
case 'PICKUP':
var image = 'imagens/marker_pickup' + imgTipo;
break;
case 'ONIBUS':
var image = 'imagens/marker_onibus' + imgTipo;
break;
case 'TRATOR':
var image = 'imagens/marker_trator' + imgTipo;
break;
default:
var image = 'imagens/marker_carro' + imgTipo;
break;
}
// Atualiza a imagem de status do sinal se não for grupo (apenas uma posição no array)
if (coordenadas.length == 1)
{
$('li.status-sinal').html(imagemSinal(dados.sinal));
$('li.status-ignicao').html(estadoIgnicao);
if (coordenadas[i].ligado=='S')
{
$('li.status-ignicao').html('<p style="font-face: verdana; font-size: 9px; color:#0F0; display: block; padding: 10px; padding-top: 20px;">Ligado</p>');
}
else
{
$('li.status-ignicao').html('<p style="font-face: verdana; font-size: 9px; color:#CCC; display: block; padding: 10px; padding-top: 20px;">Desligado</p>');
}
}
if (markerArray[i].getIcon() != image) {
markerArray[i].setIcon(image);
//console.log(image);
}
//console.log(novaPos);
}
}
});
}
}
}
setInterval(autoReload, 3000);
function autoReload(){
var pagina = $('ul.pager li:last > a').attr('href');
var pagina = parseInt(pagina.replace(/[^\d]+/g,''));
var pagina = pagina - 1;
var url = 'default.php?pagina='+pagina;
if(strPesquisa != ""){
url += "&query="+strPesquisa;
}
$('#default').load(url,{},function () {
var oIframe = document.getElementById('mapa');
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
var markersArray = oDoc.markersArray;
var marcadores = oDoc.marcadores;
var google = oDoc.google;
for (var i = 0; i < marcadores.length; i++) {
var imei = marcadores[i].imei;
var lat = $('#veiculoLatitude'+imei).html();
var lon = $('#veiculoLongitude'+imei).html();
var novaPos = new google.maps.LatLng(lat, lon);
markersArray[i].setPosition(novaPos);
$("#mapa"+imei).prop("checked",true);
}
});
}
interAutoReload = setInterval(autoReload, 5000);
function getAddressGMaps(lat,long)
{
var myLatLng = new google.maps.LatLng(lat, long);
// OBTÉM O ENDEREÇO
geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': myLatLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(results[0].formatted_address);
}
else
{
alert('Desculpe, não consegui identificar o endereço. Por favor tente novamente em instantes.');
//return google.maps.GeocoderStatus;
}
});
}
var poly;
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: var_map
}
poly = new google.maps.Polyline(polyOptions);
// Mapa Animado
function drawNewAnimatedMap()
{
i = counterTrace;
var lat_lng = [];
//var latlngbounds = new google.maps.LatLngBounds();
if (i == 0)
{
var iconeImg = icons.end;
}
else if (i == (markers.length -1))
{
var iconeImg = icons.start;
}
else
{
var iconeImg = 'imagens/marcador_historico.png';
}
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
// polyline com a rota percorrida do ponto anterior até aqui.
var path = poly.getPath();
path.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
icon: iconeImg,
map: var_map
});
var_map.panTo(myLatlng);
var_map.setZoom(17);
latlngbounds.extend(marker.position);
markerArrayHist.push(marker);
if (i == markers.length-1)
{
clearInterval(intervalTraceRoute);
var_map.setCenter(latlngbounds.getCenter());
var_map.fitBounds(latlngbounds);
waitingDialog.hide();
}
counterTrace++;
}
var myApp;
myApp = myApp || (function () {
var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
return {
showPleaseWait: function() {
pleaseWaitDiv.modal();
},
hidePleaseWait: function () {
pleaseWaitDiv.modal('hide');
},
};
})();
$("#cmbLimite").change(function(){
if ($("#cmbLimite").val()>100)
{
alert("Atenção: Escolhido mais de 100 pontos. É possível que o histórico e o mapa demorem a ser processados.");
}
});
</script>Discussão (6)
Carregando comentários...