如何使用javascript在谷歌地图中的多个标记之间绘制路线图

Posted 2023-05-07

【中文标题】如何使用javascript在谷歌地图中的多个标记之间绘制路线图

【英文标题】：How to draw Route map between multiple markers in google maps using javascript

【发布时间】：2018-01-02 17:24:06

【问题描述】：

我使用谷歌地图 API 开发了地图。标记通过适当的标签可见。但是如何在多个标记之间绘制路线？

谷歌地图图片：

JS文件代码如下(userhistory.js)

var	marker = []; 
						 $("#map").show();
				       	 map = new google.maps.Map(document.getElementById('map'), 
			      			zoom: 10,
			     		    center: new google.maps.LatLng(17.7254567, 83.3097112),
			     		    mapTypeId: google.maps.MapTypeId.ROADMAP
			    		);

				       	 directionsDisplay.setMap(map);
			    var infowindow = new google.maps.InfoWindow();
			    var i;
				
			    for (i = 0; i < response.length; i++) 
			    	
				    marker = new google.maps.Marker(
			        position: new google.maps.LatLng(response[i].latitude, response[i].longitude),
			        map: map,
			        label: response[i].count
			      	); 

			      	google.maps.event.addListener(marker, 'click', (function(marker, i) 
			        return function() 
			          infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address);
			          infowindow.open(map, marker);
			        
			      )(marker, i));  
			

我很困惑，有人可以帮忙吗？

【参考方案1】：

您可以按照此处的示例将您的标记用作生成路线的航路点。

https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

var marker = []; 
$("#map").show();
map = new google.maps.Map(document.getElementById('map'), 
zoom: 10,
center: new google.maps.LatLng(17.7254567, 83.3097112),
mapTypeId: google.maps.MapTypeId.ROADMAP
);

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map); 

var startPoint;
var endPoint;
var waypts = [];

var infowindow = new google.maps.InfoWindow();
var i;

for (i = 0; i < response.length; i++)        
marker = new google.maps.Marker(
    position: new google.maps.LatLng(response[i].latitude, response[i].longitude),
    map: map,
    label: response[i].count
); 

if (i == 0) 
    startPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude)


if (i == response.length - 1) 
    endPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude),


if ((i > 0) && (i < response.length - 1)) 
    waypts.push(
        location: ew google.maps.LatLng(response[i].latitude, response[i].longitude),
        stopover: true
    );


google.maps.event.addListener(marker, 'click', (function(marker, i) 
return function() 
    infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address);
    infowindow.open(map, marker);

)(marker, i));  


calcRoute(startPoint, endPoint, waypts);

//add this function
function calcRoute(start,end,waypts)  
var request = 
    origin: start,
    destination: end,
    waypoints: waypts,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
;
directionsService.route(request, function(response, status) 
if (status == google.maps.DirectionsStatus.OK) 
    directionsDisplay.setDirections(response);

);

【讨论】：

感谢您的回复。我试过老板。我认为这不是正确的答案。

它工作正常，但一个标记创建了我原始标记的底部。内部标记颜色是绿色，它有自己的信息窗口。我不需要内部标记。