Question

我在尝试理解我上网的代码从一个点到另一个点执行路由时遇到了一些问题。这是我的修改版本。第一部分是map的初始化：

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的标记，并根据返回的路径创建自己的标记。

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

来自两点的谷歌地图路线

1 个答案: