3

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

2 Respostas 2

4
+50

Guarde uma referência do Marker criado e reutilize-o, atualizando a posição via método setPosition() dessa instância. Exemplo a seguir:

angular.module('myApp', []).
directive('myMap', function($timeout) {
  var link = function(scope, element, attrs) {

    var map, infoWindow;
    var markers = [];

    var currPos = { x: 50, y: 2 }; // <- Posição inicial
    var mapOptions = { center: new google.maps.LatLng(50, 2), zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false };

    function initMap() { if (map === void 0) { map = new google.maps.Map(element[0], mapOptions); } }

    function setMarker(map, position, title, content) {
      var marker;
      var markerOptions = { position: position, map: map, title: title, icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png' };

      marker = new google.maps.Marker(markerOptions);
      scope.marker = marker;
      markers.push(marker);
    }

    initMap();

    setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'Londres', 'xxxxxxxxx');
    map.panTo(new google.maps.LatLng(51.508515, -0.125487));

    floatABit = function() {

      currPos.x = currPos.x + ((Math.random() * 50) - 25) / 50;
      currPos.y = currPos.y + ((Math.random() * 50) - 25) / 50;

      var ll = new google.maps.LatLng(currPos.x, currPos.y);

      scope.marker.setPosition(ll);
      map.panTo(ll); // Comente para interromper o panning automático.
      $timeout(floatABit, 500);
    };

    floatABit();

  };

  return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    link: link
  };
});
#gmaps {
  width: 100%;
  height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="myApp">

  <div my-map=""></div>

</div>

Fonte: https://jsfiddle.net/Xeoncross/k5c2ndyL/, com alterações.

4
  • No link enviado ele não se atualiza né? Estou pelo celular.
    – Dorath
    Commented 1/09/2016 às 22:25
  • @Dorathoto pelo link funcionou - talvez ajudaria a formar uma resposta mais completa se você disponibilizasse um jsfiddle funcional com o seu conteúdo.
    – OnoSendai
    Commented 2/09/2016 às 16:51
  • show, esse foco que o mapa fica dando no marcador é possível de desabilitar?
    – Dorath
    Commented 6/09/2016 às 14:05
  • @Dorathoto Sim, essa é a linha que identifiquei com o comentário // Comente para interromper o panning automático. Panning é o nome do efeito.
    – OnoSendai
    Commented 6/09/2016 às 14:06
1

Boa tarde, esta diferença ocorre porque o site que voce mandou de exemplo não utiliza o Google Maps, utiliza a ferramenta Open Street Map (demonstração, Wiki da API). Já tive esse problema do mapa ficar recarregando e não consegui encontrar uma solução.

Voltando à utilização do Google Maps, desde já te recomendo a não utiliza-la para este fim, como é possível ver na tabela de preços do Google Maps (link) Casos de uso de acompanhamento de ativos que parecer ser o seu caso, cai no plano Premium. Mês passado fui notificado pelo Google que teria que pagar por uma licença Premium, o preço gira em torno de $15.000 dólares por ano (para 500.000 requisições/ano). Migrei a minha plataforma para o OpenStreetMap e funciona perfeitamente, recomendo o mesmo.

4
  • até gostaria de utilizar o open Street Map, mas na minha cidade além de ser muito desatualizado a maioria das ruas não tem nome. Inviabilizando o uso.
    – Dorath
    Commented 12/08/2016 às 20:13
  • Este é um grande problema mesmo do OpenStreetMap, mas voce pode utilizar a API do Google so para a parte do Geocode e utilizar o OpenStreet para plotar o mapa. Funciona perfeitamente
    – Euler01
    Commented 12/08/2016 às 20:14
  • preciso do mapa com os nomes das ruas...não vai dar..vou tentar olhar o Bing pra ver. Analise o Bing e está bem desatualizado, tem todos nomes de ruas, mas uma rua que foi criada a 6 meses ainda não existe.
    – Dorath
    Commented 12/08/2016 às 20:15
  • 1
    Então utilize o Google mesmo, talvez vc da sorte e não é notificado. E talvez mais pra frente os mapas são atualizados e você começa a utilizá-los .
    – Euler01
    Commented 12/08/2016 às 20:26

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 .