早上好,我在SnapToRoad上遇到问题,我根据要返回的内容获取所有参数,但是在地图上绘制时,它绘制了道路,如下图所示:
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,但经过修改后可以与我们的数据库一起使用以检索坐标。