我正在使用Google Maps Directions服务向用户显示两点之间的路线,该点已通过输入框输入,并使用DirectionsRenderer显示了方向。方向显示非常好,但是我想显示自定义折线(如附图所示),笔触颜色为黑色,填充颜色为白色,以显示方向,而不是默认方向。请提出实现此目标的最佳方法。
我试图通过DirectionsRenderer图标选项实现这一目标。
以下是代码或相同的代码:
<script>
var map;
var directionsService, directionsDisplay;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.6072352, lng: 6.3027546},
zoom: 8
});
var infowindow = new google.maps.InfoWindow;
var lineSymbol = {
path: 'm 0,0 0,1',
strokeOpacity: 1,
strokeWeight:1.5,
strokeColor: '#58595b',
scale: 1,
rotation:0,
anchor: {x:-2.5, y:0}
};
var lineSymbol2 = {
path: 'm 0,0 0,1',
strokeOpacity: 1,
strokeWeight:1.5,
strokeColor: '#58595b',
scale: 1,
rotation:0,
anchor: {x:2.5, y:0}
};
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeOpacity: 1,
geodesic: true,
icons: [{icon:lineSymbol, offset: '0', repeat:'0.5px'},
{icon:lineSymbol2, offset: '0', repeat:'0.5px'}
],
strokeColor:'white',
strokeWeight: 5
}
});
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == 'OK') {
console.log(result);
directionsDisplay.setDirections(result);
}
});
}
</script>
我可以达到this fiddle所示的效果,但是线条不清晰并且在某些点交叉。我想显示由Google地图显示的折线,以显示方向-具有不同的笔触和填充颜色。