GoogleMap 두 지점에서 연결

Question

한 지점에서 다른 지점으로 라우팅을 수행하기 위해 온라인으로 얻은 코드를 이해하려고 할 때 약간의 문제가있었습니다. 다음은 수정 된 버전입니다. 제 1 부분은지도의 초기화이다

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

경로의 색상은 markerOptions 예컨대 :

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

참고하면, 예를 들어 다른 마커를 정의 할 수 있습니다 통해, rendererOptions의 polylineOptions -property을 통해 마커를 설정할 수 있습니다 시작과 끝내려면 DirectionsRender의 마커를 사용 중지하고 반환 된 경로를 기반으로 마커를 만들어야합니다.

directionsPanel을 설정할 때 노드 (div#directionsPanel)가 존재하지 않기 때문에 길 찾기 패널이 표시되지 않습니다. getRouteDirection에 노드를 만들므로 대신이 함수의 끝에 패널을 설정하십시오.