10 Feb 2012 02:27:43

สอบถามการใช้งาน google map ครับ

สอบถามการใช้งาน google map ครับ

ผมลองอ่านดูวิธีการทำ

ลองทำตามดู แล้วอยากจะประยุกต์ครับ เช่นจะเอาไปประยุกต์ใช้กับร้าน ว่า จุด มาร์ก ที่เห็น คือร้านของผม

แล้วให้ลูกค้า ป้อน lat long แล้วให้กูเกิลคำนวน เป็นระยะทางออกมา หรือให้ลูกค้าระบุจุดมาร์ก อีกตัวเพื่อลากไปยัง บ้านของลูกค้า

อาจจะไม่ต้องป้อน lat long ก็ได้ครับ

คล้ายแบบนี้ครับ

ระยะทางจากเชียงใหม่ไปสิงคโปร์

แล้วก็กดปุ่มคำนวนเพื่อให้กูเกิลคำนวนออกมาครับ

ขอบคุณบทความดีดี ที่มีมาให้อ่านเรื่อยๆครับ แต่ละบทสุดยอดจริงๆเลยครับ ขอบคุณจากใจจริงครับ

โดย: Amdev IP: 202.28.183.xxx วันที่: 20-04-2010 เวลา: 14:41:43

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

การเพิ่มการอธิบายเส้นทาง ขอต่อจาก บทความ

http://www.ninenik.com/สร้างเส้นทาง_เพื่อ_หาระยะทาง_ใน_google_map_ด้วย_jQuery-276.html

มีการปรับเพิ่มมาเล็กน้อย ให้ดูโค้ดด้านล่างกับ บทความตามลิ้งด้านบน เปรียบเทียบกันดู

ตัวอย่าง

โค้ด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html{
	padding:0px;
	margin:0px;
}
div#map_canvas{
	margin:auto;
	width:600px;
	height:550px;
	overflow:hidden;
}
div#route{
	width: 250px;
	height:380px;
	border:1px solid black;
	position:absolute;
	float:left;
	font-size:12px;
	background-color:#F4F4F4;	
	overflow:auto;
	display:none;
}
</style>

</head>

<body>


<div id="route"></div>
<div id="map_canvas"></div> 



<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg&amp;hl=th" type="text/javascript"></script>
<script type="text/javascript"> 
var directionsPanel; // เพิ่มส่วนอธิบายเส้นทาง
var directions; // สร้างตัวแปรสำหรับกำหนดเส้นทาง
function initialize() { 
  if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("map_canvas")); 	
	var center = new GLatLng(13.77436,100.53458); // การกำหนดจุดเริ่มต้น
	map.setCenter(center, 13);  // เลข 13 คือค่า zoom  สามารถปรับตามต้องการ 
	map.setUIToDefault(); 
	
	var marker = new GMarker(center, {draggable: false});  // สร้างตัว mark เริ่มต้น
    map.addOverlay(marker);
	
	var markerGoTo = new GMarker(center, {draggable: true}); // สร้างตัว mark อีกอัน
	directionsPanel = document.getElementById("route"); // ส่วนสำหรับแสดงคำอธิบายเส้นทาง
	map.addOverlay(markerGoTo);
	directions = new GDirections(map,directionsPanel);	// เพิ่มส่วนอธิบายเส้นทาง
	var directOpt= { "preserveViewport": true, "getSteps": true ,"getPolyline":true};	// กำหนดรูปแบบของส้นทาง

	GEvent.addListener(markerGoTo, "dragend", function() {
		var point = markerGoTo.getPoint(); // หาตำแหน่างเมื่อหยุดการลากตัว mark
		// แสดงคำอธิบายเส้นทาง พร้อมจัดตำแหน่ง เลือกกำหนดตำแหน่งตามต้องการ
		$(directionsPanel).show().css({
			left:$("div#map_canvas").offset().left,
			top:$("div#map_canvas").offset().top,
			"z-index":1000
		});
		directions.load("from: "+point+" to:13.77436,100.53458 ",directOpt); // สร้างเส้นทาง
	});
	GEvent.addListener(directions, "load", function() {
		var drivingDistanceKilometers = directions.getDistance().meters / 1000;		// หาระยะทางเป็น กิโลเมตร
		$("#distanceDrive").val(drivingDistanceKilometers); // นำค่าที่ได้ไปใส่ใน textbox 
	});		 	
	 
  } 
} 
</script> 
<script type="text/javascript" src="../jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	initialize();
	$(document.body).unload(function(){
			GUnload();
	});
	$("#Reset").click(function(){
		directions.clear(); // ลบเส้นทางจากแผนที่
		$(directionsPanel).hide(); // ปิดคำอธิบายเส้นทาง
	});	
});
</script>
<div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
    ระยะทาง
    <input name="distanceDrive" type="text" id="distanceDrive" value="0" />
    กม.
    <input type="submit" name="button" id="button" value="บันทึก" />
    <input type="button" name="Reset" id="Reset" value="ยกเลิก เพื่อกำหนดจุดใหม่" />
  </form>
</div>
</body>
</html>

โดย: Ninenik IP: 124.120.179.xxx วันที่: 22-04-2010 เวลา: 11:05:19

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

ขอบคุณมากๆครับ

ขอถามเพิ่มอีกนิดนึงครับ แล้วถ้า จะให้กูเกิลบอกเราด้วยว่า ให้เลี้ยวซ้ายตรงนี้ ขวาตรงนี้

เหมือนตัวอย่างที่ให้ดูนี้ เพิ่มยังไงครับ

โดย: Amdev IP: 202.28.179.xxx วันที่: 22-04-2010 เวลา: 09:27:33

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

ลองดูตัวอย่าง http://www.ninenik.com/สร้างเส้นทาง_เพื่อ_หาระยะทาง_ใน_google_map_ด้วย_jQuery-276.html อาจเป็นแนวทางได้

ใน google map api มีหลายส่วนที่สามารถนำไปใช้ หรือประยุกต์ใช้งานได้

หากมีแนวคิด หรือไอเดียดี ๆ ลองมาโพสถามไว้ เพื่อเป็นแนวทางสำหรับ เขียนบทความต่อไป

โดย: Ninenik IP: 124.120.167.xxx วันที่: 21-04-2010 เวลา: 09:58:17

จำนวนผู้เยี่ยมชม 783545