google map รถโดยสารสาธารณะสารมารถแสดงผลลัพธ์หลายเส้นทางได้มั้ยคะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา google map รถโดยสารสาธารณะสารมารถแสดงผลลัพธ์หลายเส้นทางได้มั้ยคะ

google map รถโดยสารสาธารณะสารมารถแสดงผลลัพธ์หลายเส้นทางได้มั้ยคะ
กำลังทำเกี่ยวกับการค้นหาเส้นทางของรถเมล์ค่ะ และใช้google direction service ผลลัพธ์ได้ออกมาเส้นทางเดียว เป็นเส้นทางที่ทางgoogleเลือกมาให้ ไม่ทราบว่ามีวิธีที่ทำให้แสดงทุกเส้นทางได้มั๊ยคะ  รบกวนผู้รู้ช่วยชี้แนะด้วยนะคะ ขอบคุณล่วงหน้าค่ะ


Theprat 24-12-2014 06:15:02

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

ไม่น่าได้ ที่เคยใช้ ถ้าเป็น google direction servince ถ้ามี ต้นทาง ปลายทาง 
จะสร้างเส้นทางได้ทีละ 1 เส้นทาง และสามารถ มีทางเลือกเส้นทางอีก ถ้าจำไม่ผิดคือ 3 เส้นทาง
ที่ google จะเลือกเส้นทางใหม่ได้ และก็ขึ้นกับว่ามีทางเลือกของเส้นทางนั้นๆ มากน้อยเท่าไหร่ด้วย
ถ้าจะทำเป็นแบบเส้นทางกำหนดเอง น่าจะเป็นต้องใช้ polyline สร้างเส้นตามจุดที่เรากำหนด

ตัวอย่างเป็นแนวทาง
 

สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย 
https://www.ninenik.com/content.php?arti_id=349 via @ninenik

สามารถประยุกต์กับฐานข้อมูลได้


ninenik 24-12-2014
 ความคิดเห็นที่ 2
มันติดข้อจำกัดตรงส่วนไหนพอทราบรึป่าวคะ ไปศึกษาใน developers.google.com ก็ไม่ค่อยเข้าใจอย่างกระจ่างเท่าไหร่
เห็นว่ามี provideRouteAlternatives ถ้ากำหนดค่าเป็น true มันจะสามารถแสดงเส้นทางได้มากกว่าหนึ่งเส้นทาง
หรือทำได้เฉพาะรถยนต์คะ ตอนนี้สับสนในสิ่งศึกษามากๆเลยค่ะ ไม่รู้ว่าเข้าใจอะไรผิดไป


Theprat 24-12-2014 15:10
 ความคิดเห็นที่ 3
provideRouteAlternatives ถ้ากำหนดเป็น true จะแสดงเส้นทางแนะนำมากกว่า 1 เส้นทางได้ น่าจะหมายถึง เส้นทางเลือกที่แนะนำ
ไม่ได้หมายถึงแสดงเส้นทางพร้อมกัน  ดูตัวอย่างตามด้านล่าง 

From : To:



มีเส้นทางให้เลือกสูงสุด สาม เส้นทาง ตามตัวอย่างด้านบน เลือกได้ สองเส้นทาง ถ้าเราคลิกที่เส้นทางแนะนำ ก็จะมีเส้นทางใหม่
ถ้าต้องการแสดงเส้นทางของรถโดยสาร น่าจะต้องไปใช้งาน layer แทน กำหนดรูปแบบเป็น kml คล้าย xml โดยกำหนดจุดที่
รถโดยสารผ่าน  ดูเพิ่มเติม ที่ developer.google.map 

https://developers.google.com/maps/documentation/javascript/kmllayer


ninenik 24-12-2014
 ความคิดเห็นที่ 4
รบกวนขอตัวอย่างโค้ดตามคำตอบด้านล่างได้ไหมคะ แล้วอยากทราบอีกหน่อยว่าทำไมวิธีนั้นถึงใช้กับรถโดยสารไม่ได้คะ


Theprat 24-12-2014 21:27
 ความคิดเห็นที่ 5 
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}

#map_canvas { 
	position:relative;
	width:550px;
	height:400px;
	margin: center;	
	
}
#contain_map{
	position:relative;
	width:100%;
	height:400px;
	margin:center;	
}


#showDD{
	position:Top_center;
	bottom:0px;
	height:30px;
	padding-top:5px;
	background-color:#fff;
	color:#000;
	margin: center;	
	/*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);	
*/
}
#seetypeBus{
	bottom:0px;
	height:60px;
	padding-top:5px;
	background-color:#36F;
	color:#000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);	

}

#directionsPanel{
	/*position:auto;*/
	width:550px;
	margin:auto;
	clear:both;
	background-color:#FFC;
}

#topbar {
	BORDER-RIGHT: 0px solid; 
	PADDING-RIGHT: 0px;
	BORDER-TOP: 0px solid;
	PADDING-LEFT: 0px;
	Z-INDEX: 100;
	RIGHT: 0px;
	VISIBILITY: hidden;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: 0px solid;
	WIDTH: 110px;
	PADDING-TOP: 3px;
	BORDER-BOTTOM: 0px solid;
	POSITION: absolute;
	TOP: 300px;
	HEIGHT: 367px
}

.adp-placemark{
	background-color:#FF6;
	color:#000;	
}
.adp-summary{
	
}
.adp-directions{
	
}
#my_navigator{
	position:absolute;
	top:293px;
	right:875px;
}
/* ส่วน css สำหรับตัวควบคุม  */
#zoom_inout{
	position:absolute;
	width:32px;
	top:270px;
	right:357px;
}
#zoom_inout img{
	cursor:pointer;	
}
.gmap-control-container {
    margin: 5px;
}
.gmap-control {
    cursor: pointer;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;
    border-radius: 2px;
    padding: 0 6px;
    line-height: 160%;
    font-size: 12px;
    font-family: Arial,sans-serif;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.gmap-control:hover {
    border: 1px solid #678AC7;
}
.gmap-control-active {
    background-color: -moz-linear-gradient(center top , #6D8ACC, #7B98D9);
    background-color: #6D8ACC;
    color: #fff;
    font-weight: bold;
    border: 1px solid #678AC7;
}
.gmap-control-legend {
    position: absolute;
    text-align: left;
    z-index: -1;
    top: 20px;
    right: 0;
    width: 150px;
    height: 66px;
    font-size: 10px;
    background: #FEFEFE;
    border: 1px solid #A9BBDF;
    padding: 10px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
}
.gmap-control-legend ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.gmap-control-legend li {
    line-height: 160%;
}

<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

<style>

ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
	list-style: none;
}

ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
	position: relative;
	display: inline-block;
	color: #000; /* font color */
	text-decoration: none;
	margin: 10px 20px;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
	font-size: 22px; /* font size */
	letter-spacing: 2px; /* letter spacing */
	border-bottom: 2px solid transparent; /* Bottom border style */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
	outline: none;
	border-bottom: 2px solid #eee; /* Bottom border style on hover */
	color: #FFF;
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px; /* width of outer circle */
	height: 100px; /* height of outer circle */
	border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
	width: 60px; /* width of inner circle */
	height: 60px; /* width of inner circle */
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
	-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
	-moz-animation: pulsate 1.2s infinite;
	-ms-animation: pulsate 1.2s infinite;
	animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{

  30%{
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-moz-keyframes pulsate{

  30%{
	opacity: 1;
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-ms-keyframes pulsate{

  30%{
	opacity: 1;
	-ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-keyframes pulsate{

  30%{
	opacity: 1;
	transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}


</style>

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="scrolltopcontrol.js"></script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#FFFFFF">
<br>

<table width="600" border="0" align="center">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col"><img src="Image/busway.png" width="381" height="91"  alt=""/></th>
  </tr>
</table>

<br><div id="seetypeBus">
<div><center>

 <ul class="sonarmenu">
 <li class="back">
   <div class="center"></div></li>
           <li><a href="HomeFinalTrying.php">หน้าหลัก</a></li>
            <li><a href="Admin/Assessment.php">ประเมินการให้บริการ</a></li>
            <li><a href="Quanlity.php">คุณภาพการให้บริการ</a></li>
            <li><a href="SearchMapchT.php">ค้นหาเส้นทาง</a></li>
            <li><a href="Admin/Index.php">ผู้ดูแลเว็บไซต์</a></li>
            
      </ul>
         </center></div>
<br>
</div>

<br><br>
<div id="contain_map">
<div id="showDD"> 

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th align="center">
จาก :  <input name="namePlace" type="text" id="namePlace" size="20" placeholder="ระบุสถานที่/ป้ายหยุดรถ" />
ไป:  <input name="toPlace" type="text" id="toPlace" size="20" placeholder="ระบุสถานที่/ป้ายหยุดรถ" />
<input type="button" name="SearchPlace" id="SearchPlace" value="ค้นหา"/>
<input type="button" name="iClear" id="iClear" value="ยกเลิก" />    
    </th>
  </tr>
</table>
</div> 

<center><div id="map_canvas" align="center"></center>
</div>
<div id="my_navigator">
  <img src="Image/compass-icon.png" width="74" height="74" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area id="north_direction" shape="rect" coords="22,3,53,21" href="#" />
    <area id="south_direction"  shape="rect" coords="22,58,55,74" href="#" />
    <area id="east_direction"  shape="rect" coords="56,28,74,49" href="#" />
    <area id="west_direction"  shape="rect" coords="-7,28,11,50" href="#" />
    <area id="go_home" shape="rect" coords="26,28,49,49" href="#" />
  </map>
</div>
 <div id="zoom_inout">
  <img src="Image/zoom-in-col.png" id="i_zoom_in" width="32" height="32" />
  <img src="Image/zoom-out-col.png" id="i_zoom_out" width="32" height="32" /> 
 </div> 


<br><br>
<br/>

<center><div> 
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="SerchMap.php">  


  <p>ระยะทางโดยประมาณ
  <input name="distance_text" type="text" id="distance_text" value="" size="17" readonly/>
    ระยะทางจริง
    <input name="distance_value" type="text" id="distance_value" value="0" size="17" readonly />  
    เมตร<br> <br />
    <input type="radio" name="radio" id="rdo1" value="CR" />
    <label for="CR">ธรรมดาครีมแดง</label>
    <input type="radio" name="radio" id="rdo2" value="CB" />
    <label for="CB">ปรับอากาศครีมน้ำเงิน</label>
    <input type="radio" name="radio" id="rdo3" value="UR" CHECKED/>
    <label for="UR">ยูโรทู</label>
    <input type="radio" name="radio" id="rdo4" value="OT" />
    <label for="OT">เอกชนร่วมบริการ</label>
    <input type="radio" name="radio" id="rdo5" value="OA" />
    <label for="OT">เอกชนร่วมบริการปรับอากาศ</label>
    <br> <br />
    <input name="cal"  type="button" id="cal" value="ราคาโดยประมาณ" OnClick="JavaScript:checkPrice(distance_value.value);"> 
    <input name="cSum" type="text" id="cSum"  value="0" size="17" readonly /> 
    บาท  </p>
</form>    
</div></center> 
   
</div>
<table width="600" border="0" align="center">
  <tr>
    <th scope="col"><span id="sprytrigger1">*หมายเหตุ.</span></th>
  </tr>
</table>
<div class="tooltipContent" id="sprytooltip1">ค่าโดยสารจะใกล้เคียงความจริงที่สุดหากเป็นรถต่อเดียว</div>
<br><br>
<div id="directionsPanel"></div>

<script type="text/javascript">
var directionShow; 
var directionsService; 
var map; 
var GGM;
var myLatlng;
var initialTo;
var searchRoute;



	function initialize() {
		GGM=new Object(google.maps); 
		directionShow=new GGM.DirectionsRenderer({draggable:true});
		directionsService = new GGM.DirectionsService();
	
		myLatlng  = new GGM.LatLng(13.7278956,100.52412349999997);
		
		
		
	
var mymapTypeId=GGM.MapTypeId.ROADMAP;
var myDivObj=$("#map_canvas")[0];


var myOptions = {
	zoom: 13,
	panControl: false,
    zoomControl: false,
	mapTypeControl: true,
	position: GGM.ControlPosition.TOP_LEFT,
	mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
	

	center: myLatlng ,
	mapTypeId:mymapTypeId};
	
	
	map = new GGM.Map(myDivObj,myOptions);
	var trafficLayer = new google.maps.TrafficLayer();
	trafficLayer.setMap(map);
	
	var controlDiv = document.createElement('DIV');
$(controlDiv).addClass('gmap-control-container')
             .addClass('gmnoprint');
          
var controlUI = document.createElement('DIV');
$(controlUI).addClass('gmap-control');
$(controlUI).text('การจราจร');
$(controlDiv).append(controlUI);
          
var legend = '<ul>'
           + '<li><span style="background-color: #30ac3e">&nbsp;&nbsp;</span><span style="color: #30ac3e"> &gt; 80 กม. ต่อชั่วโมง</span></li>'
           + '<li><span style="background-color: #ffcf00">&nbsp;&nbsp;</span><span style="color: #ffcf00"> 40 - 80 กม. ต่อชั่วโมง</span></li>'
           + '<li><span style="background-color: #ff0000">&nbsp;&nbsp;</span><span style="color: #ff0000"> &lt; 40 กม. ต่อชั่วโมง</span></li>'
           + '<li><span style="background-color: #c0c0c0">&nbsp;&nbsp;</span><span style="color: #c0c0c0"> ไม่มีข้อมูล</span></li>'
           + '</ul>';
          
var controlLegend = document.createElement('DIV');
$(controlLegend).addClass('gmap-control-legend');
$(controlLegend).html(legend);
$(controlLegend).hide();
$(controlDiv).append(controlLegend);
          
// hover
$(controlUI)
    .mouseenter(function() {
        $(controlLegend).show();
    })
    .mouseleave(function() {
        $(controlLegend).hide();
    });
          
var trafficLayer = new GGM.TrafficLayer();
          
GGM.event.addDomListener(controlUI, 'click', function() {
    if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
        $(controlUI).addClass('gmap-control-active');
        trafficLayer.setMap(map);
    } else {
        trafficLayer.setMap(null);
        $(controlUI).removeClass('gmap-control-active');
    }
});
          
map.controls[GGM.ControlPosition.TOP_RIGHT].push(controlDiv);
//end 

	var input = (document.getElementById('toPlace'));
	var autocomplete = new GGM.places.Autocomplete(input);
	var input = (document.getElementById('namePlace'));
	var autocomplete = new GGM.places.Autocomplete(input);

		 //for (var i = 0; i < results.routes.legs; i++){
	
	directionShow.setMap(map);
	 
	directionShow.setPanel($("#directionsPanel")[0]);
							
	if(map){
		 searchRoute(myLatlng('',''),initialTo('',''));
	}	 
		
		GGM.event.addListener(directionShow, 'directions_changed', function()
		{
			var results=directionShow.directions; //สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
         
        var distanceText=results.routes[0].legs[0].distance.text;
        var distanceVal=results.routes[0].legs[0].distance.value;
         
        $("#distance_text").val(distanceText);  
        $("#distance_value").val(distanceVal);
		
    });  
	//}

}
	$(function(){ //สร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ 
		if(!FromPlace && !ToPlace){
var FromPlace=$("#namePlace").val();
var ToPlace=$("#toPlace").val();
		}
		
var request={ 
	origin:FromPlace,
	destination:ToPlace,
	travelMode: GGM.DirectionsTravelMode.TRANSIT,
	provideRouteAlternatives : true,
	
		};
		//show
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){
				
				directionShow.setDirections(results); 
			 
				
				
                var distanceText=results.routes[0].legs[0].distance.text;  
                var distanceVal=results.routes[0].legs[0].distance.value;
                  
                $("#distance_text").val(distanceText);  
                $("#distance_value").val(distanceVal);  
                
				var route = results.routes[0];   
							
            }else {
     
      if (status == 'ZERO_RESULTS') {
        alert('ไม่พบเส้นทางระหว่างต้นทางและปลายทางที่ระบุ');
      } else if (status == 'UNKNOWN_ERROR') {
        alert('ไม่สามารถประมวลผลได้! เนื่องจากการผิดพลาดของเซิร์ฟเวอร์ โปรดลองใหม่อีกครั้งหนึ่ง');
      } else if (status == 'REQUEST_DENIED') {
        alert('หน้าเว็บนี้ไม่ได้รับอนุญาตให้ใช้บริการเส้นทาง');
      } else if (status == 'OVER_QUERY_LIMIT') {
        alert('หน้าเว็บหายไปเกินขีดจำกัดของการร้องขอในช่วงระยะเวลาหนึ่ง');
      } else if (status == 'NOT_FOUND') {
        alert('กรุณาระบุตำแหน่งต้นทางหรือปลายทางให้ครบถ้วน !');
      } else if (status == 'INVALID_REQUEST') {
        alert('DirectionsRequest ไม่ถูกต้อง !');         
      } else {
        alert("มีข้อผิดพลาดที่ไม่รู้จักในคำขอของคุณ Requeststatus: nn"+status);
      }
    }
        });
		
		

		
	//ปุ่มคำสั่ง
	}
	$("#SearchPlace").click(function(){
	searchRoute();
	});
	
	$("#namePlace,#toPlace").keyup(function(event){ 
	if(event.keyCode==13 && $(this).val()!=""){
	searchRoute();	
		}		
	});
	
	$("#iClear").click(function(){
	$("#namePlace,#toPlace,#distance_value,#distance_text,#cSum").val("");
	});
	
		$("#i_zoom_in").click(function(){ 
		var current_zoom=map.getZoom(); 
		map.setZoom(current_zoom 1);
	});
	
	$("#i_zoom_out").click(function(){
		var current_zoom=map.getZoom(); 
		map.setZoom(current_zoom-1); 
	});	
	
	$("area#north_direction").click(function(event){
		event.preventDefault();
		map.panBy(0,-100);
	});
	$("area#south_direction").click(function(event){
		event.preventDefault();
		map.panBy(0,100);
	});
	$("area#east_direction").click(function(event){
		event.preventDefault();
		map.panBy(100,0);
	});
	$("area#west_direction").click(function(event){
		event.preventDefault();
		map.panBy(-100,0);
	});			
	$("area#go_home").click(function(event){ 
		event.preventDefault();
		// กำหนดจุดเริ่มต้นของแผนที่
		var homeCenter=new GGM.LatLng(13.7278956,100.52412349999997);
		map.setZoom(13); 
		map.setCenter(homeCenter);
	});
  
  	
});



$(function(){
$("<script/>",
	{"type": "text/javascript",src:"//maps.google.com/maps/api/js?v=3.2&sensor=false&libraries=places&language=th&callback=initialize"
	}).appendTo("body");	
});

</script>


Theprat 24-12-2014 22:51
 ความคิดเห็นที่ 6
***จะเอาตัวอย่างมาสอบถามแต่เอาไม่เป็น ฮือๆๆ ได้โค้ดมาเป็นพรืดเลย***
.
ตอนนี้ทำกับรถโดยสารได้แล้วค่ะ แต่ยังติดตรงระยะทางที่เอามาแสดง ตามตัวอย่างด้านล่างระยะทางไม่เปลี่ยนแปลงไปตามเส้นทางที่เลือกหนะค่ะ ไม่ทราบว่าต้องแก้ไขไหนส่วนไหนคะถึงจะเปลี่ยนได้ตามที่เลือก ลองแก้indexในarrayให้เป็นiผลลัพธ์ไม่ขึ้นเลยค่ะ ยังไงรบกวนชี้แนะอีกหน่อยนะคะขอบคุณมากๆค่ะ


Theprat 24-12-2014 22:53
 ความคิดเห็นที่ 7
  มีโหมด TRANSIT ด้วย ไม่เคยใช้มาก่อน นึกว่าแต่ไม่สามารถเรียกใช้เส้นทางของ รถโดยสารมาก่อน ดูจากงโค้ดแล้วสามารถใช้งาน
ได้เลย 

ตัวอย่าง




ดูตัวอย่างโค้ดด้านล่าง ไปปรับตามต้องการ พอดีตัดส่วนที่ไม่ได้ใช้ เพื่อทดสอบดู ออกบางส่วน

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}

#map_canvas { 
	position:relative;
	width:550px;
	height:400px;
	margin: center;	
	
}
#contain_map{
	position:relative;
	width:100%;
	height:400px;
	margin:center;	
}


#showDD{
	position:Top_center;
	bottom:0px;
	height:30px;
	padding-top:5px;
	background-color:#fff;
	color:#000;
	margin: center;	
	/*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);	
*/
}
#seetypeBus{
	bottom:0px;
	height:60px;
	padding-top:5px;
	background-color:#36F;
	color:#000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);	

}

#directionsPanel{
	/*position:auto;*/
	width:550px;
	margin:auto;
	clear:both;
	background-color:#FFC;
}

#topbar {
	BORDER-RIGHT: 0px solid; 
	PADDING-RIGHT: 0px;
	BORDER-TOP: 0px solid;
	PADDING-LEFT: 0px;
	Z-INDEX: 100;
	RIGHT: 0px;
	VISIBILITY: hidden;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: 0px solid;
	WIDTH: 110px;
	PADDING-TOP: 3px;
	BORDER-BOTTOM: 0px solid;
	POSITION: absolute;
	TOP: 300px;
	HEIGHT: 367px
}

.adp-placemark{
	background-color:#FF6;
	color:#000;	
}
.adp-summary{
	
}
.adp-directions{
	
}
#my_navigator{
	position:absolute;
	top:293px;
	right:875px;
}
/* ส่วน css สำหรับตัวควบคุม  */
#zoom_inout{
	position:absolute;
	width:32px;
	top:270px;
	right:357px;
}
#zoom_inout img{
	cursor:pointer;	
}
.gmap-control-container {
    margin: 5px;
}
.gmap-control {
    cursor: pointer;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;
    border-radius: 2px;
    padding: 0 6px;
    line-height: 160%;
    font-size: 12px;
    font-family: Arial,sans-serif;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.gmap-control:hover {
    border: 1px solid #678AC7;
}
.gmap-control-active {
    background-color: -moz-linear-gradient(center top , #6D8ACC, #7B98D9);
    background-color: #6D8ACC;
    color: #fff;
    font-weight: bold;
    border: 1px solid #678AC7;
}
.gmap-control-legend {
    position: absolute;
    text-align: left;
    z-index: -1;
    top: 20px;
    right: 0;
    width: 150px;
    height: 66px;
    font-size: 10px;
    background: #FEFEFE;
    border: 1px solid #A9BBDF;
    padding: 10px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
}
.gmap-control-legend ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.gmap-control-legend li {
    line-height: 160%;
}




ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
	list-style: none;
}

ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
	position: relative;
	display: inline-block;
	color: #000; /* font color */
	text-decoration: none;
	margin: 10px 20px;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
	font-size: 22px; /* font size */
	letter-spacing: 2px; /* letter spacing */
	border-bottom: 2px solid transparent; /* Bottom border style */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
	outline: none;
	border-bottom: 2px solid #eee; /* Bottom border style on hover */
	color: #FFF;
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px; /* width of outer circle */
	height: 100px; /* height of outer circle */
	border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
	width: 60px; /* width of inner circle */
	height: 60px; /* width of inner circle */
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
	-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
	-moz-animation: pulsate 1.2s infinite;
	-ms-animation: pulsate 1.2s infinite;
	animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{

  30%{
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-moz-keyframes pulsate{

  30%{
	opacity: 1;
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-ms-keyframes pulsate{

  30%{
	opacity: 1;
	-ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}

@-keyframes pulsate{

  30%{
	opacity: 1;
	transform: translateX(-50%) translateY(-50%) scale(1);
  }

	100%{
	opacity: 0.3;
	transform: translateX(-50%) translateY(-50%) scale(0.5);
	}

}


</style>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
</head>

<body bgcolor="#FFFFFF">
<br>


<br><br>
<div id="contain_map" style="padding-bottom: 150px;">
<div id="showDD"> 

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th align="center">
จาก :  <input name="namePlace" type="text" id="namePlace" size="20" placeholder="ระบุสถานที่/ป้ายหยุดรถ" />
ไป:  <input name="toPlace" type="text" id="toPlace" size="20" placeholder="ระบุสถานที่/ป้ายหยุดรถ" />
<input type="button" name="SearchPlace" id="SearchPlace" value="ค้นหา"/>
<input type="button" name="iClear" id="iClear" value="ยกเลิก" />    
    </th>
  </tr>
</table>
</div> 

<center>
<div id="map_canvas" align="center">
</div>
</center>
<br>
<br>


<center><div> 
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="SerchMap.php">  


  <p>ระยะทางโดยประมาณ
  <input name="distance_text" type="text" id="distance_text" value="" size="17" readonly/>
    ระยะทางจริง
    <input name="distance_value" type="text" id="distance_value" value="0" size="17" readonly />  
    เมตร<br> <br />
    <input type="radio" name="radio" id="rdo1" value="CR" />
    <label for="CR">ธรรมดาครีมแดง</label>
    <input type="radio" name="radio" id="rdo2" value="CB" />
    <label for="CB">ปรับอากาศครีมน้ำเงิน</label>
    <input type="radio" name="radio" id="rdo3" value="UR" CHECKED/>
    <label for="UR">ยูโรทู</label>
    <input type="radio" name="radio" id="rdo4" value="OT" />
    <label for="OT">เอกชนร่วมบริการ</label>
    <input type="radio" name="radio" id="rdo5" value="OA" />
    <label for="OT">เอกชนร่วมบริการปรับอากาศ</label>
    <br> <br />
    <input name="cal"  type="button" id="cal" value="ราคาโดยประมาณ" OnClick="JavaScript:checkPrice(distance_value.value);"> 
    <input name="cSum" type="text" id="cSum"  value="0" size="17" readonly /> 
    บาท  </p>
</form>    
</div></center> 
   
</div>
<br><br>
<br style="clear:both;"><br style="clear:both;">
<div id="directionsPanel"></div>

<script type="text/javascript">
var directionShow; 
var directionsService; 
var map; 
var GGM;
var myLatlng;
var initialTo;
var searchRoute;



	function initialize() {
		GGM=new Object(google.maps); 
		directionShow=new GGM.DirectionsRenderer({draggable:true});
		directionsService = new GGM.DirectionsService();
	
		myLatlng  = new GGM.LatLng(13.7278956,100.52412349999997);
		
		
		
	
		var mymapTypeId=GGM.MapTypeId.ROADMAP;
		var myDivObj=$("#map_canvas")[0];
		
		
		var myOptions = {
			zoom: 13,
			panControl: false,
			zoomControl: false,
			mapTypeControl: true,
			position: GGM.ControlPosition.TOP_LEFT,
			mapTypeControlOptions: {
			  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			},
			
		
			center: myLatlng ,
			mapTypeId:mymapTypeId};
			
			
			map = new GGM.Map(myDivObj,myOptions);
			var trafficLayer = new google.maps.TrafficLayer();
			trafficLayer.setMap(map);
			
			var controlDiv = document.createElement('DIV');
			$(controlDiv).addClass('gmap-control-container')
			.addClass('gmnoprint');
				  
			var controlUI = document.createElement('DIV');
			$(controlUI).addClass('gmap-control');
			$(controlUI).text('การจราจร');
			$(controlDiv).append(controlUI);
				  
			var legend = '<ul>'
			+ '<li><span style="background-color: #30ac3e">&nbsp;&nbsp;</span><span style="color: #30ac3e"> &gt; 80 กม. ต่อชั่วโมง</span></li>'
			+ '<li><span style="background-color: #ffcf00">&nbsp;&nbsp;</span><span style="color: #ffcf00"> 40 - 80 กม. ต่อชั่วโมง</span></li>'
			+ '<li><span style="background-color: #ff0000">&nbsp;&nbsp;</span><span style="color: #ff0000"> &lt; 40 กม. ต่อชั่วโมง</span></li>'
			+ '<li><span style="background-color: #c0c0c0">&nbsp;&nbsp;</span><span style="color: #c0c0c0"> ไม่มีข้อมูล</span></li>'
			+ '</ul>';
          
			var controlLegend = document.createElement('DIV');
			$(controlLegend).addClass('gmap-control-legend');
			$(controlLegend).html(legend);
			$(controlLegend).hide();
			$(controlDiv).append(controlLegend);
          
			// hover
			$(controlUI)
				.mouseenter(function() {
				$(controlLegend).show();
			})
				.mouseleave(function() {
				$(controlLegend).hide();
			});
  
			var trafficLayer = new GGM.TrafficLayer();
					  
			GGM.event.addDomListener(controlUI, 'click', function() {
				if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
					$(controlUI).addClass('gmap-control-active');
					trafficLayer.setMap(map);
				} else {
					trafficLayer.setMap(null);
					$(controlUI).removeClass('gmap-control-active');
				}
			});
          
			map.controls[GGM.ControlPosition.TOP_RIGHT].push(controlDiv);
			//end 

			var input = (document.getElementById('toPlace'));
			var autocomplete = new GGM.places.Autocomplete(input);
			var input = (document.getElementById('namePlace'));
			var autocomplete = new GGM.places.Autocomplete(input);

		 //for (var i = 0; i < results.routes.legs; i++){
	
			directionShow.setMap(map);
			directionShow.setPanel($("#directionsPanel")[0]);
							
			if(map){
			//	 searchRoute();
			}	 
		
			GGM.event.addListener(directionShow, 'directions_changed', function(){
				var results=directionShow.directions; //สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
				var distanceText=results.routes[0].legs[0].distance.text;
				var distanceVal=results.routes[0].legs[0].distance.value;
				$("#distance_text").val(distanceText);  
				$("#distance_value").val(distanceVal);
			});  
			
			GGM.event.addListener(directionShow, 'routeindex_changed',function() { 
				var indexRoute=directionShow.routeIndex;
				var results=directionShow.directions; //สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
				var distanceText=results.routes[indexRoute].legs[0].distance.text;
				var distanceVal=results.routes[indexRoute].legs[0].distance.value;
				$("#distance_text").val(distanceText);  
				$("#distance_value").val(distanceVal);
			});			
	//}

	}
	
	
$(function(){ //สร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ 
		if(!FromPlace && !ToPlace){
			var FromPlace=$("#namePlace").val();
			var ToPlace=$("#toPlace").val();
		}
		
		var request={ 
			origin:FromPlace,
			destination:ToPlace,
			travelMode: GGM.DirectionsTravelMode.TRANSIT,
			provideRouteAlternatives : true,
		};
		//show
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){				
				directionShow.setDirections(results); 
                var distanceText=results.routes[0].legs[0].distance.text;  
                var distanceVal=results.routes[0].legs[0].distance.value;
                  
                $("#distance_text").val(distanceText);  
                $("#distance_value").val(distanceVal);  
				var route = results.routes[0];   
							
            }else {
     
			  if (status == 'ZERO_RESULTS') {
				alert('ไม่พบเส้นทางระหว่างต้นทางและปลายทางที่ระบุ');
			  } else if (status == 'UNKNOWN_ERROR') {
				alert('ไม่สามารถประมวลผลได้! เนื่องจากการผิดพลาดของเซิร์ฟเวอร์ โปรดลองใหม่อีกครั้งหนึ่ง');
			  } else if (status == 'REQUEST_DENIED') {
				alert('หน้าเว็บนี้ไม่ได้รับอนุญาตให้ใช้บริการเส้นทาง');
			  } else if (status == 'OVER_QUERY_LIMIT') {
				alert('หน้าเว็บหายไปเกินขีดจำกัดของการร้องขอในช่วงระยะเวลาหนึ่ง');
			  } else if (status == 'NOT_FOUND') {
				alert('กรุณาระบุตำแหน่งต้นทางหรือปลายทางให้ครบถ้วน !');
			  } else if (status == 'INVALID_REQUEST') {
				alert('DirectionsRequest ไม่ถูกต้อง !');         
			  } else {
				alert("มีข้อผิดพลาดที่ไม่รู้จักในคำขอของคุณ Requeststatus: nn"+status);
			  }
   		 }
        });
		
		

		
	//ปุ่มคำสั่ง
	}
	$("#SearchPlace").click(function(){
		searchRoute();
	});
	
	$("#namePlace,#toPlace").keyup(function(event){ 
		if(event.keyCode==13 && $(this).val()!=""){
			searchRoute();	
		}		
	});
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace,#distance_value,#distance_text,#cSum").val("");
	});
	
	$("#i_zoom_in").click(function(){ 
		var current_zoom=map.getZoom(); 
		map.setZoom(current_zoom 1);
	});
	
	$("#i_zoom_out").click(function(){
		var current_zoom=map.getZoom(); 
		map.setZoom(current_zoom-1); 
	});	
	
	$("area#north_direction").click(function(event){
		event.preventDefault();
		map.panBy(0,-100);
	});
	$("area#south_direction").click(function(event){
		event.preventDefault();
		map.panBy(0,100);
	});
	$("area#east_direction").click(function(event){
		event.preventDefault();
		map.panBy(100,0);
	});
	$("area#west_direction").click(function(event){
		event.preventDefault();
		map.panBy(-100,0);
	});			
	$("area#go_home").click(function(event){ 
		event.preventDefault();
		// กำหนดจุดเริ่มต้นของแผนที่
		var homeCenter=new GGM.LatLng(13.7278956,100.52412349999997);
		map.setZoom(13); 
		map.setCenter(homeCenter);
	});
  
  	
});



$(function(){
$("<script/>",
	{"type": "text/javascript",src:"//maps.google.com/maps/api/js?v=3.2&sensor=false&libraries=places&language=th&callback=initialize"
	}).appendTo("body");	
});

</script>


ninenik 25-12-2014
 ความคิดเห็นที่ 8
 ขอบคุณเป็นอย่างสูงคร่าาา วันนี้เป็นเช้าที่สดใสจริงๆ อิอิ happy xmas นะค๊าาา


Theprat 25-12-2014 06:55
 ความคิดเห็นที่ 9


Theprat 08-01-2015 23:54
 ความคิดเห็นที่ 10
รบกวนอีกเรื่องนะคะ
ข้อมูลตรง text fild ที่แสดง ระยะทางโดยประมาณ กับ ระยะทางจริง จะเปลี่ยนเป็น label ต้องแก้ไขยังไงคะ
ลองทำแล้วข้อมูลไม่แสดงคร่าา รบกวนผู้รู้ช่วยชี้แนะหน่อยนะคะ TT


Theprat 09-01-2015 00:10
1 2 Next







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ