google map api之设置起点终点进行导航并显示路线详细信息

//設置起點
function setstart(){

	var newcenter = myMap.getCenter();

	if(!startpoint){

	startpoint = new google.maps.Marker({

		map:myMap,

		position:newcenter,

		draggable: true

	});}

}


//設置終點
function setend(){

	var newcenter = myMap.getCenter();

	if(!endpoint){

	endpoint = new google.maps.Marker({

		map:myMap,

		position:newcenter,

		draggable: true

	});}

}

//路線導航
function start2end(model){
	
	directionsDisplay = new google.maps.DirectionsRenderer();

	directionsDisplay.setMap(myMap);
	var startlatlng=startpoint.getPosition();
	var endlatlng=endpoint.getPosition();
	$("#jczbresult").show("slow");
	$("#jczbresultmin").hide();
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({'latLng': startlatlng}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        if (results[1]) {
	        	$("#startdrive").html('起點:'+results[1].formatted_address);
	        }}}); 
	geocoder.geocode({'latLng': endlatlng}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        if (results[1]) {
	        	
	        	$("#enddrive").html('終點:'+results[1].formatted_address);
	        }}}); 
	
	if(model=='WALKING'){
		$("#jczbtitle").innerHTML="步行查詢結果";
		directionsService.route({

			origin: startlatlng,

			destination: endlatlng,

			travelMode: google.maps.DirectionsTravelMode.WALKING

			}, function(result, status){

				if(status == google.maps.DirectionsStatus.OK){

					 directionsDisplay.setDirections(result);//標記地圖顯示路線
					 showSteps(result);//右側面板顯示詳細路線信息

					}

				});

		}else{
			$("#jczbtitle").innerHTML="駕車查詢結果";
			directionsService.route({

				origin: startlatlng,

				destination: endlatlng,

				travelMode: google.maps.DirectionsTravelMode.DRIVING

				}, function(result, status){

					if(status == google.maps.DirectionsStatus.OK){

						 directionsDisplay.setDirections(result);
						 showSteps(result);//右側面板顯示詳細路線信息

						}

					});

			}

	

}
//顯示起點終點之間的詳細信息
function showSteps(directionResult) {
	$("#driveline").html('');
    var myRoute = directionResult.routes[0].legs[0];
    var v_html = '';
    for (var i = 0; i < myRoute.steps.length; i++) {
    	var geocoder = new google.maps.Geocoder();
    	v_html += '<div class="carSearchtr02" id="driver_step_'+i+'">'+(i+1)+'.'+myRoute.steps[i].instructions+',此段路程為:'+myRoute.steps[i].distance.value+'米</div>';
    	//myRoute.steps[i].instructions;
    }
    if(v_html != '')
  	{
    	 v_html = '<div class="carSearchtr01">总里程：'+myRoute.distance.value+'米</div>'+v_html;
    	 $("#driveline").html(v_html);
  	}
  	else
  	{
			$("#driveline").html('很抱歉，沒有找到符合您要的條件，您可以試試下面的方法:<br>調整一下您輸入的搜索關鍵字');
  	}
   
  }

 

评论

4 楼 iamatig 2014-03-30  

请问多目的地怎么弄呢？

3 楼 疯子在地球 2013-04-15  

我想点击地图任何一个地方的 右键点击 会弹出一个白色的菜单栏  然后可以动态设置起点或终点  楼主会吗？  求指教呀！[color=red][/color][size=large][/size]

2 楼 anyanlonga 2012-08-09  

anyanlonga 写道

页面显示咋么写啊

没反应啊

1 楼 anyanlonga 2012-08-09  

页面显示咋么写啊