21

Nesse Meu script a baixo ele a cada 30 segundos faz com que o icone mude de posição, so que o icone some e aparece no próximo ponto.

  • Mais oque eu queria, era que ele caminhe-se até o próximo ponto como mostrado na imagem a baixo

inserir a descrição da imagem aqui

Como não entendo de javascript estou pedindo essa ajudinha

//Icons
	var customIcons = {
       airport: {
        icon: 'images/AirPort.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
       hotelothon: {
        icon: 'images/othon.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      
        
    };

	//Popup dos markers
	var infoWindow = null;	

	//A visibilidade do mapa precisa estar global
	var map = null;
	
	//Este é um array global dos marcadores presentes na tela
	var markersArray = [];

	/*
	 * Inicialização da API de Mapas do Google 
	 */
	function initialize() {

		//Não vou explicar o óbvio!!!
		var myLatlng = new google.maps.LatLng(-22.91729049, -43.18914413);
		var myOptions = {
			zoom : 12,
			center : myLatlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP


		}

		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
          var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);
          //  Inicio do Jonson para altera a cor do Mapa
        var pink_parks = [
];
    map.setOptions({styles: pink_parks});
    
    directionsDisplay = new google.maps.DirectionsRenderer();    
    directionsDisplay.setMap(map);        
                
           // Fim do jonson     
				
		infoWindow = new google.maps.InfoWindow;				
		
		//Esse método eu criei para realizar o load dos markers no mapa
		//Execução imediata!!!
		updateMaps();

		//Definimos tambem execução com intervalo de tempo
        // 5000 = 5 segundos
        // 10000= 10 segundos
		window.setInterval(updateMaps, 10000);

	}
	
	/*
	 * Método que remove os overlays dos markers
	 */
    function clearOverlays() {
	  for (var i = 0; i < markersArray.length; i++ ) {
	   markersArray[i].setMap(null);
	  }
	}
	
	/*
	 * Método que realiza chama o caminho do xml de dados
	 * e atualiza o mapa
	 */	
	function updateMaps() {

		// Vamos remover o que já havia de overlay
		// É possível implementar a remoção e inclusão seletiva
		clearOverlays();

		//Aqui é o pulo do gato, que muita gente perde noites de sono
		//e quando você para para ver a solução, percebe que é tão óbvia
		
		//Quando chamamos um arquivo, o browser pode tomar a decisão
		//de armazenar em cache. Se o browser utilizar cache, as próximas 
		//requisições do mesmo recurso não batem no servidor.
		
		//Definindo um modificador único para o arquivo de dados conseguimos "FORÇAR" 
		//o browser a baixar novamente o arquivo.
		
		//Em java eu utilizo o header do http para dizer NO-CACHE!!
		
		var timestamp = new Date().getTime();
		var data = 'gps/data.php?t=' + timestamp;
		
		//Me guardo o direito a não explicar o óbvio, novamente
		$.get(data, {}, function(data) {
			$(data).find("gps").each(
			
					function() {
						var gps = $(this);
						var nome = gps.attr("nome");
                        var alti = gps.attr("alti");
                        var bateria = gps.attr("bateria");
						var speed = gps.attr("speed");
                        var data = gps.attr("data");
                        var hora = gps.attr("hora");
						var p_nome = gps.attr("p_nome");
                        var status1 = gps.attr("status1");
                        var destino = gps.attr("destino");
                        var from_to = gps.attr("from_to");
                        var in_out = gps.attr("in_out");
                        var id_saida = gps.attr("id_saida");
                        var start = gps.attr("start");
                        var p_tipo_serv = gps.attr("p_tipo_serv");
                        var hora_start = gps.attr("hora_start");
                        var modelo = gps.attr("veo");
                        var placa = gps.attr("placa");
                        var origem = gps.attr("origem");
                        var destino = gps.attr("destino");
                        var cor = gps.attr("cor");
                        var forn = gps.attr("fornecedor");
                        var foto1 = gps.attr("foto1");
                        var fotom = gps.attr("fotom");
                        var frase = gps.attr("frase");
                        
                        var id_pax = gps.attr("id_pax");
                        
                        var id_motorista = gps.attr("id_motorista");
                        var img = gps.attr("img");
						var statusgps = gps.attr("statusgps");
                        var p_tipo_veiculo = gps.attr("vei");
                    var icon = customIcons[p_tipo_veiculo] || {};
         				var latlng = new google.maps.LatLng(parseFloat(gps
								.attr("lat")), parseFloat(gps.attr("longi")));
						var html = "<b>Codigo do Servi&ccedil;o:&nbsp;" + id_saida + "</b> " + id_motorista + 


"<table border='0' width='400'>"+
"<tbody>"+
"<tr>"+
"<td style='text-align: center; color: #fff; font-family: Segoe,;' colspan='4' bgcolor='#663366'>Detalhes do Transporte</td>"+
"</tr>"+
"<tr>"+
"<td colspan='2' height='40'><br /><strong>Produto:&nbsp;&nbsp;</strong>"+p_nome+"  "+frase+"</td>"+
"<td style='text-align: center;' rowspan='6' width='132'><span style='font-size: xx-small;'>Mororista</span><br /><img src='img/fotos/"+fotom+"' alt='' width='100' /><br />"+nome+"</td>"+
"</tr>"+
"<tr>"+
"<td colspan='2' width='172'><strong>Indo Para:&nbsp;&nbsp;</strong>"+destino+"&nbsp;</td>"+
"</tr>"+
"<tr>"+
"<td><strong>Data:&nbsp;&nbsp;</strong>"+start+"</td>"+
"<td><strong>&nbsp;in/out:</strong> "+in_out+"</td>"+
"</tr>"+
"<tr>"+
"<td><strong>Hora:&nbsp;&nbsp;</strong>"+hora_start+"</td>"+
"<td>&nbsp;<strong>to:</strong> "+from_to+"</td>"+
"</tr>"+
"<tr>"+
"<td><strong>Placa:&nbsp;</strong>"+placa+"</td>"+
"<td>&nbsp;</td>"+
"</tr>"+
"<tr>"+
"<td style='text-align: center;' colspan='2' height='26'><hr /><a href='gps/pax2.php?id_saida="+id_saida+"' target='_blank'><strong>Listar Passageiros</strong></a></td>"+
"</tr>"+
"<tr>"+
"<td>&nbsp;</td>"+
"</tr>"+
"<tr>"+
"<td bgcolor='#330066'><span style='color: #ffffff;'><strong>Speeed:&nbsp;</strong>"+speed+"Km</span></td>"+
"<td colspan='2' bgcolor='#330066'><span style='color: #ffffff;'><strong>Bateria:&nbsp;</strong>"+bateria+"</span></td>"+
"</tr>"+
"</tbody>"+
"</table>"



     
                  
                        "";
       var marker = new google.maps.Marker({
       position : latlng,
   	   map : map,
       title: id_saida,
       icon: icon.icon,
       labelContent: "$425K",
      // labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75} ,                           

          
                            
							//shadow: icon.shadow,
						});
		
        

        				
						google.maps.event.addListener(marker, 'click', function() {
						        infoWindow.setContent(html);
						        infoWindow.open(map, marker);
						      });						
						
					//Opa... bora guardar as referências dos markers??
					markersArray.push(marker);
						
					google.maps.event.addListener(marker, "click", function() {});
					});
			});
0
		}

		google.setOnLoadCallback(initialize);
	
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Main Container Fluid -->
	<div class="">
	<div id="" style="height: 460px;">



<div id="map_canvas" style="position: absolute; top: 10%;  left: 0%; width: 100%; height: 765px"></div>
<div id="log"></div>			
				
			</div>

3 Respostas 3

11

Eu uso o Marker animate

https://github.com/combatwombat/marker-animate

var marker = new google.maps.Marker({position: new google.maps.LatLng(0,0), map: myMap, title: 'Hello World!'});
var newPosition = new google.maps.LatLng(13,42);
marker.animateTo(newPosition, {  duration: 1000 });

Se colocar o markerAnimate.js no seu html e usar o código. Se tiver dificuldade me avisa que faço um exemplo com seu código.

3
  • 1
    André Muito Legal isso era isso mesmo... só que não estou sabendo implantar nesse meu script ta dando erro. poderia fazer um exemplo? Commented 26/04/2016 às 23:18
  • Fabio, poderia postar o erro?
    – David
    Commented 28/04/2016 às 21:12
  • Ola André não é erro só não funciona Commented 30/04/2016 às 13:15
5

Fábio segue um exemplo que irá te ajudar, fiz a criação de uma marcador e coloquei para ele se deslocar até uma determinada coordenada:

Google maps com marcador animado

HTML

<div id="map_canvas" ></div>

JAVASCRIPT

initialize();

function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-34.397, 150.644),
    map: map
});

var posicaDestino = new google.maps.LatLng(-34.197, 150.644);

marker.animateTo(posicaDestino, {
    duration: 13000,
    complete: function() {
        alert("Chegou ao destino!");
    }
});

}

  1. Cria uma variável com uma coordenada que será o centro.
  2. São setadas as options como zoom, o centro com a coordenada acima e o tipo do mapa.
  3. É criado o mapa: new google.maps.Map
  4. Crio um novo marcador(marker) com uma coordenada igual a do centro.
  5. Crio uma variável(posicaoDestino) para onde o marcador irá se deslocar
  6. Chamo o método de animação marker.animate informando a velocidade de deslocamento em milisegundos(duration) e uma função que será chamada ao chegar à coordenada -34.197, 150.644.

Os seguintes recursos precisam ser referenciados no projeto(Jquery, GoogleMaps e MarkerAnimate):

Obs: no seu caso como estará capturando novas coordenadas o tempo todo, digamos que a cada 20s, o processo acima será executado várias vezes e o método de animação chamado cada vez que uma nova posição for capturada.

Se preferir acesse meu JSFiddle em: http://jsfiddle.net/rodrigorf/gxge3b5c/


PARTE 2

Editando a reposta para adicionar o que foi feito com o script existente, não usei o seu XML pois a lógica ia ficar complicada para eu criar o php e carregar as informações, o conceito é o mesmo blz? Simplifiquei apenas o carregamento de dados, vai ter que quebrar a cabeça um pouquinho e aprender um pouco de javascript hehehehe. Enfim, segue o que foi feito:

  1. A função clearOverlays() não deve ser mais usada, não funciona com ela pois ela remove o marcador criado da tela, e precisamos deles a cada Update para mover-los pela tela corretamente.
  2. O carregamento de novas coordenadas estão sendo simuladas através de um array que criei na mão. A cada Update eu pego a próxima coordenada.

inserir a descrição da imagem aqui

  1. Veja que setei o tempo da animação para durar 5 segundos entre cada posição e o tempo de atualização do GPS para cada 10 segundos.
  2. Funciona para um marcador e irá funcionar para os outros que você tem. A diferença é que as posições novas não vão vir de um array e sim do seu XML.
  3. Removi a lista gigante de icones no começo pois não influencia a parte de animação nos meus teste.
  4. No seu caso não vai nem precisar controlar o nextPos e nextPosGPS pois quando você puxa os dados do XML eles já são dados novos de novas coordenadas.

    var infoWindow = null;
    var map = null;
    var markersArray = [];
    var nextPosGPS = 0;
    var data = gerarArrayPosicoesGPS();
    
    initialize();
    
    function initialize()
    {
        var myLatlng = new google.maps.LatLng(-22.91829049, -43.18914413);
        var myOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    
        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
    
        var pink_parks = [];
        map.setOptions({
            styles: pink_parks
        });
    
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
    
        infoWindow = new google.maps.InfoWindow;
        updateMaps();
        window.setInterval(updateMaps, 10000);
    }
    
    function updateMaps()
    {
        nextPos = nextPosGPS + 1;
        var marker = [];
        var latlng = new google.maps.LatLng(data[nextPos].x, data[nextPos].y);
        if (markersArray.length > 0)
        {
            console.log("pega do array");
            marker = markersArray[0];
            console.log("dados do marker");
        } else
        {
            console.log("cria novo marker");
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
            });
        }
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent("");
            infoWindow.open(map, marker);
        });
    
        marker.animateTo(latlng, { duration: 5000 });
    
        markersArray.push(marker);
        nextPosGPS++;
    }
    
    function gerarArrayPosicoesGPS()
    {
        var arr = new Array();
        arr.push({ x: -22.91729049, y: -43.18914413 });
        arr.push({ x: -22.91629049, y: -43.18914413 });
        arr.push({ x: -22.91529049, y: -43.18914413 });
        arr.push({ x: -22.91429049, y: -43.18914413 });
        arr.push({ x: -22.91329049, y: -43.18914413 });
        arr.push({ x: -22.91229049, y: -43.18914413 });
        arr.push({ x: -22.91129049, y: -43.18914413 });
        arr.push({ x: -22.91029049, y: -43.18914413 });
        arr.push({ x: -22.90929049, y: -43.18914413 });
        arr.push({ x: -22.90829049, y: -43.18914413 });
    
        return arr;
    }
    

Fabio, mesmo não tendo conhecimentos aprofundados em JS recomendo fortemente que reserve um tempinho para quebrar a cabeça e adaptar o código, com pouquíssima mudança ele vai estar funcionando com o XML. Lembre-se que não pode chamar o clearOverlay senão o problema de "piscar" a tela vai continuar acontecendo. O fluxo é:

Pega coordenada GPS > criar marcador > Pega coordenada GPS > movimenta para nova posição > Pega coordenada GPS > movimenta para nova posição. E por aí vai..

4
  • Ola Rodrigo... tentei implantar no meu codigo mais deu erro... a mapa some, eu não tenho muita noção de javascript. Commented 4/05/2016 às 16:45
  • E esse script funciona com vários veículos, ele funciona direitinho, mais fica com os veiculos piscando a cada atualização . se puder me ajudar a implantar nesse meu script acima ja vai me ajudar muito.... Commented 4/05/2016 às 16:54
  • vou tentar com o seu script e ver o que consigo
    – rodrigorf
    Commented 4/05/2016 às 19:30
  • meu xml---> <gps> <gps lat="" longi="" id_motorista="0" p_nome="" img="" speed="" frase="" id_saida="0" data="" placa="" fotom=""/> <gps lat="-22.7097683333" longi="-42.6261733333" id_motorista="0" p_nome="" img="" speed="001.7" frase="" id_saida="0" data="" placa="" fotom=""/> <gps lat="-22.9849211" longi="-43.1914952" id_motorista="124" p_nome="" img="" speed="0" frase="" id_saida="352" data="" placa="" fotom=""/> <gps lat="-22.9172516667" longi="-43.0946033333" id_motorista="138" p_nome="" img="" speed="045.1" frase="A caminho" id_saida="349" data="" placa="" fotom=""/> </gps> Commented 5/05/2016 às 0:26
1

Muito simples:

A rotina updateMaps() está chamando a clearOverlays() que limpa todos os markers. Por isso de 30s em 30s eles somem e reaparecem.

Apenas exclua os markers que não tiveram mudança em determinado tempo, por exemplo 30mins.

Para isso adicione dois campos com: última atualização e a placa. Assim você pode identificar os markers.

Na rotina updateMaps(), localize um marker existente usando a placa antes de criar. Se existir a placa basta atualizar a posição.

Avise, se precisar de mais detalhes.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .