Estou utilizando o mapa do Google para mostrar objetos em tempo real.
Fiz uma função em Javascript
que é atualizada a cada 3 segundos e nisso ela atualiza os marcados no mapa do Google.
Algo como:
vmarcador[value.Id] = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text " + value.Lon
});
vmarcador[value.Id].setPosition(localidade_viatura_atualizado);
Ok, tudo funciona, o problema é que meu mapa parece ser recarregado a cada 3 segundos é diferente desse outro site onde somente o objeto é movimentado.
http://traintimes.org.uk/map/tube/
O fonte do link acima está aqui.
Mas não consigo entender a diferença dele para o meu (o codigo dele é muito mais complexo)
Meu código, segue exemplo dele: http://jsbin.com/danequzala/edit?html,js,console
Basicamente é: (altere a chave do google map para uma sua, essa não funcionára fora do jsbin.com
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFL7XB2lwmJ-albxQgXFoGi4N7xwTO-sU" type="text/javascript"></script>
<div id="map_canvas" style="width:100%; height: 900px"></div>
<script>
$(document).ready(function () {
inicia_tempo_real("");
});
var total_viaturas_exibidas;
var map;
var vmarcador = [];
var janela_detalhes = [];
var vconta_vtrs_inicio = 0;
var vconta_vtrs_real_time = 0;
var ViaturaId;
var UrlRestPontos = "http://coi.wmb.com.br/monitoramento/JsonViaturasOnline";
var tempoRefresh = 5; //Seg
var triangleCoords;
var x = new google.maps.LatLng(-23.120520, -46.546923);
function inicia_tempo_real(VTRId) {
ViaturaId = VTRId;
var mapProp = {
center: x,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map($('#map_canvas')[0], mapProp);
clearInterval(vintervalo);
vconta_vtrs_inicio = 0;
// Recupera origem dos pontos..
$.getJSON(UrlRestPontos + "?viaturaValor=" + ViaturaId, function (valores_recebidos) {
$.each(valores_recebidos.pontos_recebidos, function (i, value) {
var localidade_viatura_atualizado = new google.maps.LatLng(value.Lat, value.Log);
vconta_vtrs_inicio++;
var myLatlng = new google.maps.LatLng(value.Lat, value.Lon);
janela_detalhes[value.Id] = new google.maps.InfoWindow({
content: "VTR:" + value.VTR,
});
vmarcador[value.Id] = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text " + value.Lon
});
vmarcador[value.Id].setPosition(localidade_viatura_atualizado);
janela_detalhes[value.Id].open(map, vmarcador[value.Id]);
google.maps.event.addListener
(
vmarcador[value.Id], 'click', function () {
document.getElementById('IFRAMEMonitoramento').src = '/monitoramento/DetalhesVTRIframe?viaturaValor=' + value.ViaturaId;
$('#myModal').modal();
}
);
});
});
var vintervalo = setInterval(function () {
atualiza()
}, tempoRefresh * 1000);
CarregaAtibaia();
}
function CarregaAtibaia() {
var AreaAtibaia = [];
$.ajax({
type: "GET",
url: "/scripts/coi/bordaAtibaia.json",
dataType: "json",
success: function (data) {
AreaAtibaia = data;
DesenhaAtibaia(AreaAtibaia);
}
});
}
function DesenhaAtibaia(varea_atibaia) {
var AreaAtibaia = new google.maps.Polygon({
paths: varea_atibaia,
strokeColor: '#FF0000',
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.04
});
AreaAtibaia.setMap(map);
}
function atualiza() {
if (vconta_vtrs_real_time != vconta_vtrs_inicio && vconta_vtrs_real_time > 0) {
vconta_vtrs_real_time = vconta_vtrs_inicio;
// inicia_tempo_real();
}
vconta_vtrs_real_time = 0
$("#viaturas_selecionadas").empty();
$("#viaturas_selecionadas").append('<option value="0">Todas</option>');
$.getJSON(UrlRestPontos + "?viaturaValor=" + ViaturaId, function (valores_recebidos) {
$.each(valores_recebidos.pontos_recebidos, function (i, value) {
var localidade_viatura_atualizado = new google.maps.LatLng(value.Lat, value.Log);
var vvtrs;
var vocorrencias;
var vvalores_mostrar = "";
vconta_vtrs_real_time++;
$("#viaturas_selecionadas").append('<option value="' + value.ViaturaId + '">' + value.VTR + '</option>');
vmarcador[value.Id].setPosition(localidade_viatura_atualizado);
if (value.Situacao == 1) {
vmarcador[value.Id].setIcon('http://coi.wmb.com.br/Content/img/viatura_busy.png')
}
else {
vmarcador[value.Id].setIcon('http://coi.wmb.com.br/Content/img/viatura_free.png')
}
if ($("#exibir_vtr").is(":checked")) {
vvalores_mostrar = "VTR:" + value.VTR;
}
if ($("#exibir_oco").is(":checked")) {
if (vvalores_mostrar != "") {
vvalores_mostrar = vvalores_mostrar + "<br>OCO:" + value.CodigoOcorrencia;
}
else {
vvalores_mostrar = "OCO:" + value.CodigoOcorrencia;
}
}
if ($("#exibir_vtr").is(":checked") || $("#exibir_oco").is(":checked")) {
janela_detalhes[value.Id].open(map, vmarcador[value.Id]);
janela_detalhes[value.Id].setContent(vvalores_mostrar);
}
else {
janela_detalhes[value.Id].close();
}
});
});
}
</script>
será que o meu problema é que uso o setPosition