PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

รู้จักการสร้าง polylines ใน google map v3 ตอนที่ 1

06 February 2013 By


 โค้ดและตัวอย่างต่อไปนี้ เป็นแนวทางการสร้างเส้น polylines ในแผนที่

โดยการลากเลือกจุดเริ่มต้นด้วย marker แล้วสร้างเส้น polylines ตาม
ตำแหน่งที่ปักหมุด มีตัวอย่างการลบ เส้น polylines ออกจากแผนที่
 
 
ดูคำอธิบายในโค้ดประกอบ
 
<!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>Google Map API 3 - 01</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;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
/*	margin-top:100px;*/
}
#map_control_tool{
	position:relative;
	width:550px;	
	margin:auto;	
	margin-top:5px;
	background-color:#F1F7E6;
}
</style>


</head>

<body>

<div style="margin:auto;width:600px;padding-top:50px;">
  <div id="map_canvas"></div>
  <div id="map_control_tool">
    <input type="button" name="button" id="button" value="Clear Map Polylines" onclick="clearMapPolylines();" />
  </div>
</div>
  
<script src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var arr_path=[]; // กำหนดตัวแปรสำหรับเก็บค่าอาเรย์ ตำแหน่ง path
var makePolyline; // กำหนดตัวแปร ฟังก์ชั่น สร้างเส้น polylines
var objPolylines=[]; // กำหนดตัวแปรสำหรับเก็บค่า object ของ polylines
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	var my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});
	
	// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
	GGM.event.addListener(my_Marker, "dragend", function() {
		var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
		arr_path.push(my_Point); // เพิ่มค่าตำแหน่ง จากตัว marker ตำแหน่งล่าสุด
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker ล่าสุด
				
		makePolyline(arr_path); // ส่งค่าตำแหน่งใน array ไปสร้างเส้น polylines ในแผนที่
//		console.log(arr_path);
	});		

	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, "zoom_changed", function() {
		$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value 	
	});

}

makePolyline=function(arr_path){
//	console.log(arr_path.length);
	var i=arr_path.length-1;
	objPolylines[i] = new GGM.Polyline({ // กำหนดรูปแบบของเส้น polylines
		path: arr_path,// array ตำแหน่งที่เก็บค่า lat,lon
		strokeColor: "#FF0000", // สี
		strokeOpacity: 1.0, // ความโปร่งใส
		strokeWeight: 2 //ความหน้าของเส้น
	});	
	objPolylines[i].setMap(map);	// สร้างเส้น polylines ในแผนที่
//	console.log(arr_path);
//	console.log(objPolylines);
}
clearMapPolylines=function(){
	arr_path=[];	
	for(i=0;i<objPolylines.length;i++){
//		console.log(i);
		objPolylines[i].setMap(null);
	}

//	console.log(arr_path);
}
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>
 

Tags:: polylines google map





URL สำหรับอ้างอิง