PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

จัดรูปแบบ ScaleControlOptions ใน Google Map

12 September 2010 By


ส่วนของ ScaleControlOptions คือส่วนที่แสดงสเกลอัตราส่วนของแผนที่ โดยปกติจะไม่แสดง และถ้าต้องการ
แสดงต้องกำหนดใน option ของ map ให้เป็น scaleControl:true, ตำแหน่งเริ่มต้นเมื่อแสดง scaleControl จะอยู่
มุมล่างด้านซ้ายต่อหลังจากโลโก้ของ Google  การจัดการในส่วนของ ScaleControlOptions นี้ ทำให้เราสามารถกำหนด ตำแหน่ง และ รูปแบบได้

ตำแหน่งต่าๆ งประกอบไปด้วย
ภาพประกอบจาก Google

 

BOTTOM แสดงชิดขอบล่างตรงกลาง
BOTTOM_LEFT แสดงชิดขอบล่างด้านซ้ายต่อหลังจากโลโก้ของ Google
BOTTOM_RIGHT แสดงชิดขอบล่างด้านขวาก่อนคำว่า copyrights
LEFT แสดงชิดขอบข้างด้านซ้ายอยู่ใต้ส่วนอื่นที่ชิดขอบบนซ้ายลงมา
RIGHT แสดงชิดขอบข้างด้านขวาอยู่ใต้ส่วนอื่นที่ชิดขอบบนขวาลงมา
TOP แสดงชิดขอบบนตรงกลาง
TOP_LEFT แสดงชิดขอบบนด้านซ้ายขยับออกจากแนวตรงกลาง
TOP_RIGHT  แสดงชิดขอบบนด้านขวาขยับออกจากแนวตรงกลาง

รูปแบบของ ScaleControlOptions มีเพียงรูปแบบเดียวจะกำหนด หรือไม่กำหนดก็ได้
DEFAULT  แสดงสเกลอัตราส่วนของแผนที่ แบบมาตรฐาน

ส่วนที่ใช้ในการจัดตำแหน่ง ScaleControlOptions และรูปแบบ style ในโค้ด
 

	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่
		scaleControl:true, // กำนหนดให้แสดงสเกลอัตราส่วน ในแผนที่
		scaleControlOptions:{ // กำนหนดตำแหน่าง และรูปแบบ style ของสเกลอัตราส่วนของแผนที่
			position:GGM.ControlPosition.BOTTOM_LEFT, // จัดตำแหน่ง  
			style:GGM.ScaleControlStyle.DEFAULT // จัดรูปแบบ style    
		}
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

คลิกดูผลลัพธิ์ การจัดตำแหน่ง และรูปแบบต่างๆ

 

        
 

 

ตัวอย่างโค้ด

<!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:650px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
.mybtTest{
	border:1px solid #999;
	background-color:#000;
	color:#FFF;
	font-weight:bold;
	font-size:10px;
}
.mybtTest2{
	border:1px solid #009;
	background-color:#069;
	color:#FFF;
	font-weight:bold;
	font-size:10px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
  <div style="width:650px;text-align:left;margin:auto;">
  <br />
<button class="mybtTest">BOTTOM</button>&nbsp;  
<button class="mybtTest">BOTTOM_LEFT</button>&nbsp;
<button class="mybtTest">BOTTOM_RIGHT</button>&nbsp;
<button class="mybtTest">LEFT</button>&nbsp;
<button class="mybtTest">RIGHT</button>&nbsp;
<button class="mybtTest">TOP</button>&nbsp;
<button class="mybtTest">TOP_LEFT</button>&nbsp;
<button class="mybtTest">TOP_RIGHT</button>&nbsp;
<hr />
<button class="mybtTest2">DEFAULT</button>&nbsp;
</div>  
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var infowindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
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]; 

//	ตำแหน่งต่างประกอบไปด้วย
//	BOTTOM	แสดงชิดขอบล่างตรงกลาง
//	BOTTOM_LEFT	แสดงชิดขอบล่างด้านซ้ายต่อหลังจากโลโก้ของ Google
//	BOTTOM_RIGHT	แสดงชิดขอบล่างด้านขวาก่อนคำว่า copyrights 
//	LEFT	แสดงชิดขอบข้างด้านซ้ายอยู่ใต้ส่วนอื่นที่ชิดขอบบนซ้ายลงมา
//	RIGHT	แสดงชิดขอบข้างด้านขวาอยู่ใต้ส่วนอื่นที่ชิดขอบบนขวาลงมา
//	TOP	แสดงชิดขอบบนตรงกลาง
//	TOP_LEFT แสดงชิดขอบบนด้านซ้ายขยับออกจากแนวตรงกลาง
//	TOP_RIGHT  แสดงชิดขอบบนด้านขวาขยับออกจากแนวตรงกลาง	

//	รูปแบบประกอบไปด้วย
//	DEFAULT  แสดงปุ่มควบคุมการย่อขยายและส่วนควบคุมการเลื่อนตำแหน่งแบบเต็ม 
//   หรือขึ้นอยู่กับองค์ประกอบอื่นๆ ก็จะเปลี่ยนแปลงไปตามนั้น
	
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่
		scaleControl:true, // กำนหนดให้แสดงสเกลอัตราส่วน ในแผนที่
		scaleControlOptions:{ // กำนหนดตำแหน่าง และรูปแบบ style ของสเกลอัตราส่วนของแผนที่
			position:GGM.ControlPosition.BOTTOM_LEFT, // จัดตำแหน่ง  
			style:GGM.ScaleControlStyle.DEFAULT // จัดรูปแบบ style    
		}
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
//		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});

/*	infowindow = new GGM.InfoWindow({
		content:$.ajax({
			url:'placeDetail.php',
			async:false
		}).responseText
	});*/
	
	// กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง infowindows
	GGM.event.addListener(my_Marker, 'click', function() {
//		infowindow.open(map,my_Marker);
		var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
//        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
//        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
//        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
//        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
	});		

	GGM.event.addListener(my_Marker, 'click', function() {
//		infowindow.open(map,my_Marker);
		var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
//        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
//        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
//        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
//        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
	});		



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


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

}
var tmpPosition;
var tmpStyle;
$("button.mybtTest").click(function(){
	var mapScaleControlOpt=$(this).text();
	tmpPosition=eval("GGM.ControlPosition."+mapScaleControlOpt);
	map.setOptions({
		scaleControlOptions:{
			position:eval("GGM.ControlPosition."+mapScaleControlOpt),
			style:tmpStyle
		}
	});
});
$("button.mybtTest2").click(function(){
	var mapScaleControlOpt=$(this).text();
	tmpStyle=eval("GGM.ScaleControlStyle."+mapScaleControlOpt);
	map.setOptions({
		scaleControlOptions:{
			position:tmpPosition,
			style:eval("GGM.ScaleControlStyle."+mapScaleControlOpt)
		}
	});
});
$(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:: scalecontroloptions google map จัดรูปแบบ





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