0

Estou desenvolvendo sistema de rastreamento e preciso que ao consultar o trajeto onde o veículo passou. Quero que ponto inicial e final sejam identificados com outro ícone conforme imagem. Segue também código PHP:

    while($RS= mysql_fetch_array($RSS)){
    $x = $x + 1;
    $kx .= "new google.maps.LatLng(".str_replace(",", ".", $RS["vl_latitude"]).", ".str_replace(",", ".", $RS["vl_longitude"])."),";

    if($RS["ig"] == "1"){$ig="LIGADA";}else{$ig="DESLIGADA";}
    if($x == 1){$pt = $pt . chr(91)."'INICIO: ".date("d/m/Y H:i:s", strtotime($RS["dt_hora"]))." - ".$RS["ds_posicao"]." | Ig: ".$ig."', ".str_replace(",", ".", $RS["vl_latitude"]).", ".str_replace(",", ".", $RS["vl_longitude"]).", ".$x."],";}else{$pt = $pt . chr(91)."' ".date("d/m/Y H:i:s", strtotime($RS["dt_hora"]))." - ".$RS["ds_posicao"]." | Ig: ".$ig."', ".str_replace(",", ".", $RS["vl_latitude"]).", ".str_replace(",", ".", $RS["vl_longitude"]).", ".$x."],";}
    $adata  = $RS["dt_hora"];
    if($RS["ig"] == "1"){$aig="LIGADA";}else{$aig="DESLIGADA";}
    //$aig  = $RS["ig"];
    $apos   = $RS["ds_posicao"];
    $alat   = $RS["vl_latitude"];
    $alng   = $RS["vl_longitude"];
}
$pt = $pt . chr(91)."'FIM: ".date("d/m/Y H:i:s", strtotime($adata))." - ".$apos." | Ig: ".$aig."', ".str_replace(",", ".", $alat).", ".str_replace(",", ".", $alng).", ".$x."],";

inserir a descrição da imagem aqui

Função para criação do Marker:

function setMarkers(map, locations) {
    var image = new google.maps.MarkerImage('../../imagens/car_mini.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(0, 10));
    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
    };

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}
1
  • 1
    Por favor, remova a imagem do código em Javascript e insira o próprio código. Isso facilita pra quem vai te ajudar.
    – viana
    Commented 29/08/2017 às 3:47

1 Resposta 1

1

Basta criar dentro do laço de repetição um Marker diferente criando uma condição para identificar qual primeira e última coordenada registrada. Veja abaixo como deveria ficar seu código:

var image = new google.maps.MarkerImage('../../imagens/car_mini.png',
  new google.maps.Size(20, 32),
  new google.maps.Point(0,0),
  new google.maps.Point(0, 10));

var outraImagem = new google.maps.MarkerImage('../../imagens/car.png',
  new google.maps.Size(20, 32),
  new google.maps.Point(0,0),
  new google.maps.Point(0, 10));

var shape = {
  coord: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
};

for (var i = 0; locations.lenght; i++) {

    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });

    // aqui é a primeira posição
    if (i == 0) {
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: outraImagem,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }

    // aqui é a ultima posição
    if (i == (locations.length - 1)) {
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: outraImagem,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}
14
  • Entendi, e como faço para declarar a segunda imagem? //imagem1 var image = new google.maps.MarkerImage('../../imagens/car_mini.png', new google.maps.Size(20, 32), new google.maps.Point(0,0), new google.maps.Point(0, 10)); //imagem2 var imagem = new google.maps.MarkerImage('../../imagens/car.png', new google.maps.Size(20, 32), new google.maps.Point(0,0), new google.maps.Point(0, 10)); seria algo assim? Commented 29/08/2017 às 4:29
  • @LucasSpielmann faz logo abaixo da primeira porém com um nome diferente. Como no exemplo que dei: outraImagem
    – viana
    Commented 29/08/2017 às 4:30
  • consegue me chamar no whats fazendo favor? nossa vai me ajudar muito mesmo. 49 999290123 Commented 29/08/2017 às 4:32
  • 1
    @LucasSpielmann viu que eu comentei na sua pergunta. Edite a pergunta e coloque o código em vez da imagem. Isso facilita pra quem está te ajudando. Tem como você fazer isso?!
    – viana
    Commented 29/08/2017 às 4:39
  • 1
    Vamos continuar esta discussão no chat.
    – viana
    Commented 29/08/2017 às 4:42

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 .