กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
รูปแบบแผนที่ google map ประเภทแผนที่

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ รูปแบบแผนที่ google map ประเภทแผนที่

ดูแล้ว 18,031 ครั้ง


รูปแบบ ประเภทของแผนที่ google map ตามการใช้งาน

ROADMAP  ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน และเส้นทาง
SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม
HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน
TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ


การกำหนด แก้ไข และเปลี่ยนแปลงรูปแบบ ประเภทของ แผนที่ google map สามารถ
ทำได้ใน 2 วิธี
 (ในที่นี้ไม่ได้หมายถึง การเปลี่ยนมุมมองจากตัวแผนที่โดยตรงจากผู้ใช้งาน  แต่เป็นการกำหนดในส่วนของโปรแกรม)

1.การกำหนด ตอนเริ่มต้นสร้างแผนที่
 

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP // การกำหนดตอนเริ่มสร้างแผนที่
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

2.การกำหนด จากใช้งาน ฟังก์ชัน คำสั่งในภายหลัง ด้วย setMapTypeId()

map.setMapTypeId(google.maps.MapTypeId.TERRAIN); 

 
ROADMAP ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน
SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม
HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน
TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ
 
   

 

 ตัวอย่างโค้ดการกำหนด การใช้งาน ตามข้อ 2
 

<!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:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
  <div style="margin:auto;text-align:center;">
  <div style="width:500px;text-align:left;margin:auto;">
	ROADMAP  ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน<br />
	SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม<br />
	HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน<br />
	TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ 	  <br />
    </div>
  <button>ROADMAP</button>&nbsp;
  <button>SATELLITE</button>&nbsp;
  <button>HYBRID</button>&nbsp;
  <button>TERRAIN</button> 
  </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 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);

	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	
//	MapTypeId.ROADMAP  ใช้เมื่อต้องการแสดงแผนที่แบบปกติ เป็นแผนที่แสดงถนน
//	MapTypeId.SATELLITE ใช้เมื่อต้องการแสดงแผนที่แบบภาพถ่ายดาวเทียม
//	MapTypeId.HYBRID ใช้เมื่อต้องการแสดงแผนที่แบบปกติ กับภาพถ่ายดาวเทียมรวมกัน
//	MapTypeId.TERRAIN ใช้เมื่อต้องการแสดงลักษณะภูมิประเทศ 	
	
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 15, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:GGM.MapTypeId.HYBRID // กำหนดรูปแบบแผนที่
	};
	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 เมื่อเอาเมาส์มาอยู่เหนือ
	});

}
$("button").click(function(){ 
	var mapType=$(this).text();
	map.setMapTypeId(eval("GGM.MapTypeId."+mapType)); 
});
$(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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

ข้อสังเกต เราจะไม่สามารถกำหนด ประเภทของ แผนที่โดยตรง แต่ต้องกำหนดโดยอ้างอิง ผ่าน MapTypeId class คือต้องกำหนดเป็น
google.maps.MapTypeId.TERRAIN
แทนที่จะกำหนด TERRAIN 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





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

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


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


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







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ