谷歌地图Google地图两点之间的路线

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

路线的颜色可以通过rendererOptions的polylineOptions -property经由markerOptions例如为：

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

请注意，可以不限定用于例如不同的标记被设置，标记开始和结束，要实现这一点，您必须禁用DirectionsRender的标记并根据返回的路线创建您自己的标记。

directionsPanel不可见，因为节点（div#directionsPanel）在设置directionsPanel时不存在。您在getRouteDirection中创建节点，因此请将该面板设置在该功能的末尾。