Snap To Road未在道路上绘制

时间:2019-02-08 11:53:42

标签: javascript

早上好,我在SnapToRoad上遇到问题,我根据要返回的内容获取所有参数,但是在地图上绘制时,它绘制了道路,如下图所示:

Imagem 1

Imagem 2

var apiKey = '****';

var map;
var drawingManager;
var placeIdArray = [];
var polylines = [];
var snappedCoordinates = [];

var infoWindow;
var url_array = [];
var taxiData = [];
var MY_MAPTYPE_ID = 'custom_style';
var Parametro;
var TipoMapa;


function initializeMapa() {
    url_array = Parametro;

    if (TipoMapa==4) {
        var mapOptions = {
            zoom: 10,
            center: {lat: -27.0967502, lng: -52.6257773},
            mapTypeId: 'roadmap'
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


        //var flightPlanCoordinates = [];
        var pontos = [];
        for (var i = 0; i < url_array.length; i++) {
            var _pontos = url_array[i].Pontos;

            var dados_transacionador = '';
            //var flightPlanCoordinates = [];
            for(var x = 0; x < _pontos.length; x++){
                dados_transacionador += '<div class="transacionador"><h3>'+_pontos[x].transacionador+'</h3>';
                dados_transacionador += '<p>Horário visita: '+_pontos[x].hora_visita+' </p></div>';
                var tipo = 0;
                if(x==0)
                    tipo=1;
                if(x==_pontos.length-1)
                    tipo=2;
                pontos.push([_pontos[x].latitude, _pontos[x].longitude, _pontos[x].cidade, '<p style="padding: 0; margin: 0; font-weight: bold;">Visita: ' +_pontos[x].visitacod + '</p> '+ _pontos[x].transacionador + ' <br /> Hora visita: ' + _pontos[x].hora_visita  , dados_transacionador,tipo]);
                snappedCoordinates.push([_pontos[x].latitude, _pontos[x].longitude]);
            }
            runSnapToRoad(snappedCoordinates);
        }

        infoWindow = new google.maps.InfoWindow({maxWidth: 200});
        google.maps.event.addListener(map, 'click', function () {
            infoWindow.close();
        });
        var styledMapOptions = {
            name: 'Custom Style'
        };
        displayMarkers(pontos);
        alert('runSnapToRoad DEPOIS');
    }
}

// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad(path) {
  var pathValues = [];
  for (var i = 0; i < path.length; i++) {
    pathValues.push(path[i]);
    //alert('runsnap: '+path[i]);
  }

  $.get('https://roads.googleapis.com/v1/snapToRoads', {
    interpolate: true,
    key: apiKey,
    path: pathValues.join('|')
  }, function(data) {
    processSnapToRoadResponse(data);
    drawSnappedPolyline();
  });

}

// Store snapped polyline returned by the snap-to-road service.
function processSnapToRoadResponse(data) {
    alert('processSnapToRoadResponse');
  snappedCoordinates = [];
  placeIdArray = [];
  for (var i = 0; i < data.snappedPoints.length; i++) {
    var latlng = new google.maps.LatLng(
        data.snappedPoints[i].location.latitude,
        data.snappedPoints[i].location.longitude);
    snappedCoordinates.push(latlng);
    placeIdArray.push(data.snappedPoints[i].placeId);
  }
  alert('placeIdArray: '+placeIdArray+' - snappedCoordinates'+snappedCoordinates);
}

// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
    alert('drawSnappedPolyline');
  var snappedPolyline = new google.maps.Polyline({
    path: snappedCoordinates,
    strokeColor: 'black',
    strokeWeight: 3
  });

  snappedPolyline.setMap(map);
  polylines.push(snappedPolyline);
}

function displayMarkers(pontos) {

    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < pontos.length; i++) {
        var point = pontos[i];
        var latlng = new google.maps.LatLng(point[0], point[1]);
        createMarker(latlng, point[3], point[4],point[5]);
        bounds.extend(latlng);
    }
    map.fitBounds(bounds);
}
function createMarker(latlng, nome, content, tipo) {

    if(tipo==1){
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon: 'MapaInfogen/markerazul.png'
        });
        google.maps.event.addListener(marker, 'mouseover', function () {
            infoWindow.setContent(nome);
            infoWindow.open(map, marker);
        });
        google.maps.event.addListener(marker, 'mouseout', function () {
            infoWindow.close();
        });
    }
     if(tipo==2){
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon: 'MapaInfogen/markervermelho.png'
        });
        google.maps.event.addListener(marker, 'mouseover', function () {
            infoWindow.setContent(nome);
            infoWindow.open(map, marker);
        });
        google.maps.event.addListener(marker, 'mouseout', function () {
            infoWindow.close();
        });
     }
     if(tipo==0){
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon: 'MapaInfogen/marker.png',
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            infoWindow.setContent(nome);
            infoWindow.open(map, marker);
        });
        google.maps.event.addListener(marker, 'mouseout', function () {
            infoWindow.close();
        });
     }
}

它绘制了(但不是应该绘制的),我使用的是Google在此链接中提供的代码:SnapToRoads Google,但经过修改后可以与我们的数据库一起使用以检索坐标。

0 个答案:

没有答案