我正在使用Google Maps JS API搜索附近的地方,即基于我的LatLng的餐馆：
var request = {
location: myLocation,rankBy: google.maps.places.RankBy.disTANCE,types: ['bar','cafe','food','liquor_store','lodging','meal_delivery','meal_takeaway','night_club','restaurant'],keyword: ['bar','pub']
};
searchService.nearbySearch(request,callback);
我得到了结果数组,想要显示从数组到第一个位置的方向：
var request = {
origin: myLocation,destination: bars[0].geometry.location,travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request,function (response,status) {
if (status == google.maps.Directionsstatus.OK) {
directionsdisplay.setDirections(response);
directionsdisplay.setoptions({
suppressMarkers: true
});
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
Map.marker(myRoute.steps[i].start_location,myRoute.steps[i].instructions);
}
} else {
console.log("directionsService : " + status);
}
});
其中bars [0]是包含searchService.nearbySearch查询结果的数组.
我确实得到了指示,但即使正确放置了引脚,最后的“虚线腿”也似乎丢失了.当您将其与maps.google.com指示进行比较时,引脚和方向路线之间会出现虚线.
我的API说明：http://damianbilski.com/temp/api_example.png
Maps.google.com路线：http://damianbilski.com/temp/online_example.png
任何想法如何使用directionsService.route获得最后一个虚线的腿.
非常感谢你的帮助！
解决方法
Google Maps Javascript API v3路线服务不会为您执行此操作(至少目前为止).如果需要,可以从路线结果的末尾添加“虚线”折线到地点的位置.
proof of concept fiddle
代码段：
var geocoder;
var map;
var searchService;
var myLocation;
var directionsService = new google.maps.DirectionsService();
var directionsdisplay = new google.maps.DirectionsRenderer();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"),{
center: new google.maps.LatLng(37.4419,-122.1419),zoom: 13,mapTypeId: google.maps.MapTypeId.ROADMAP
});
myLocation = map.getCenter();
var marker = new google.maps.Marker({
position: myLocation,map: map
});
searchService = new google.maps.places.PlacesService(map);
directionsdisplay.setMap(map);
var request = {
location: myLocation,'pub']
};
searchService.nearbySearch(request,function(bars,status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var barMark = new google.maps.Marker({
position: bars[0].geometry.location,map: map,icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",size: new google.maps.Size(7,7),anchor: new google.maps.Point(3.5,3.5)
}
});
var request = {
origin: myLocation,travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request,function(response,status) {
if (status == google.maps.Directionsstatus.OK) {
directionsdisplay.setDirections(response);
directionsdisplay.setoptions({
suppressMarkers: true,preserveViewport: true
});
var polyline = getpolyline(response);
map.setCenter(polyline.getPath().getAt(polyline.getPath().getLength() - 1));
map.setZoom(19);
var lineLength = google.maps.geometry.spherical.computedistanceBetween(bars[0].geometry.location,polyline.getPath().getAt(polyline.getPath().getLength() - 1));
var lineheading = google.maps.geometry.spherical.computeheading(bars[0].geometry.location,polyline.getPath().getAt(polyline.getPath().getLength() - 1));
var markerO = new google.maps.Marker({
position: google.maps.geometry.spherical.computeOffset(bars[0].geometry.location,lineLength * 0.1,lineheading)
});
var markerD = new google.maps.Marker({
position: google.maps.geometry.spherical.computeOffset(bars[0].geometry.location,lineLength * 0.9,lineheading)
});
var markerA = new google.maps.Marker({
position: google.maps.geometry.spherical.computeOffset(markerO.getPosition(),lineLength / 3,lineheading - 40)
});
var markerB = new google.maps.Marker({
position: google.maps.geometry.spherical.computeOffset(markerD.getPosition(),lineheading - 140)
});
var curvedLine = new GmapsCubicBezier(markerO.getPosition(),markerA.getPosition(),markerB.getPosition(),markerD.getPosition(),0.01,map);
var line = new google.maps.polyline({
path: [bars[0].geometry.location,polyline.getPath().getAt(polyline.getPath().getLength() - 1)],strokeOpacity: 0,icons: [{
icon: {
path: 'M 0,-1 0,1',strokeOpacity: 1,scale: 4
},offset: '0',repeat: '20px'
}],// map: map
});
} else {
console.log("directionsService : " + status);
}
});
}
});
}
google.maps.event.addDomListener(window,"load",initialize);
function getpolyline(result) {
var polyline = new google.maps.polyline({
path: []
});
var path = result.routes[0].overview_path;
var legs = result.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
}
}
}
return polyline;
}
var GmapsCubicBezier = function(latlong1,latlong2,latlong3,latlong4,resolution,map) {
var lat1 = latlong1.lat();
var long1 = latlong1.lng();
var lat2 = latlong2.lat();
var long2 = latlong2.lng();
var lat3 = latlong3.lat();
var long3 = latlong3.lng();
var lat4 = latlong4.lat();
var long4 = latlong4.lng();
var points = [];
for (it = 0; it <= 1; it += resolution) {
points.push(this.getBezier({
x: lat1,y: long1
},{
x: lat2,y: long2
},{
x: lat3,y: long3
},{
x: lat4,y: long4
},it));
}
var path = [];
for (var i = 0; i < points.length - 1; i++) {
path.push(new google.maps.LatLng(points[i].x,points[i].y));
path.push(new google.maps.LatLng(points[i + 1].x,points[i + 1].y,false));
}
var Line = new google.maps.polyline({
path: path,geodesic: true,strokeOpacity: 0.0,icons: [{
icon: {
path: 'M 0,scale: 4
},repeat: '20px'
}],strokeColor: 'grey'
});
Line.setMap(map);
return Line;
};
GmapsCubicBezier.prototype = {
B1: function(t) {
return t * t * t;
},B2: function(t) {
return 3 * t * t * (1 - t);
},B3: function(t) {
return 3 * t * (1 - t) * (1 - t);
},B4: function(t) {
return (1 - t) * (1 - t) * (1 - t);
},getBezier: function(C1,C2,C3,C4,percent) {
var pos = {};
pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent) + C4.x * this.B4(percent);
pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent) + C4.y * this.B4(percent);
return pos;
}
};
html,body,#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="map_canvas"></div>