GoogleMap Route from Two Points

Question

У меня возникла проблема при попытке понять коды, которые я получаю в сети, для выполнения маршрутизации с одной точки на другую. Вот моя модифицированная версия. Первая часть является инициализация карты:

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
function initialize() { 
var rendererOptions = { 
    draggable : true 
}; 
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
var mapOptions = { 
    center : { 
     lat : 1.32814, 
     lng : 103.80679 
    }, 
    zoom : 11 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
getRouteDirection(); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

Этот метод будет выполняться один раз карту завершения инициализации:

function getRouteDirection() { 
var htmlStr = "<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Get Directions"; 
htmlStr += "<input id='calcRoutebtn' type='button' value='Calculate' onClick='calcRoute()' />"; 
htmlStr += "<div id='directionsPanel'></div>"; 
htmlStr += "</div><br/>"; 
document.getElementById("divGetRouteDirection").innerHTML = htmlStr; 
} 

При нажатии кнопки на мыши, он будет выполнять эту функцию:

function calcRoute() { 
var travelMode = 'TRANSIT'; 
var start = document.getElementById('startLoc').value; 
var end = document.getElementById('endLoc').value; 
var request = { 
    origin : start, 
    destination : end, 
    unitSystem : google.maps.UnitSystem.IMPERIAL, 
    travelMode : google.maps.DirectionsTravelMode[travelMode] 
}; 
directionsService 
     .route(
       request, 
       function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         // document.getElementById('directionsPanel').empty(); 
         directionsDisplay.setDirections(response); 
        } else { 
         if (status == 'ZERO_RESULTS') { 
          alert('No route could be found between the origin and destination.'); 
         } else if (status == 'UNKNOWN_ERROR') { 
          alert('A directions request could not be processed due to a server error. The request may succeed if you try again.'); 
         } else if (status == 'REQUEST_DENIED') { 
          alert('This webpage is not allowed to use the directions service.'); 
         } else if (status == 'OVER_QUERY_LIMIT') { 
          alert('The webpage has gone over the requests limit in too short a period of time.'); 
         } else if (status == 'NOT_FOUND') { 
          alert('At least one of the origin, destination, or waypoints could not be geocoded.'); 
         } else if (status == 'INVALID_REQUEST') { 
          alert('The DirectionsRequest provided was invalid.'); 
         } else { 
          alert("There was an unknown error in your request. Requeststatus: nn" 
            + status); 
         } 
        } 
       }); 

}

С ними мне удалось построить маршруты между двумя точками. Однако я не уверен, какая часть кода задала цвет маршрута, а также символ маркера. Кроме того, с этими кодами, он должен иметь что-то в directionPanels, но так или иначе, он не появляется.

Я получил свою ссылку от Tutorial. Рабочий пример находится внутри этого веб-сайта. Есть идеи? Заранее спасибо.

Answer 1

Цвет маршрута может быть установлена ​​через polylineOptions -свойстве rendererOptions, маркер через markerOptions .: например

var rendererOptions = { 
    draggable : true, 
    polylineOptions:{ 
     strokeColor:'red' 
    }, 
    markerOptions:{ 
     icon:'http://maps.google.com/mapfiles/arrow.png' 
    } 
    }; 

Обратите внимание, что вы не можете определить различные маркеры, например, начало и конец, для этого вы должны отключить маркеры для DirectionsRender и создать свой собственный маркер на основе возвращенного маршрута.

УказанияПанель не видна, поскольку узел (div#directionsPanel) не существует в тот момент, когда вы устанавливаете directionPanel. Вы создаете узел в getRouteDirection, поэтому установите панель в конце этой функции.