ขอวิธีการสร้าง marker หลายตัวโดยการ ค้นหา จาก DB ลงบนGoogle map api ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอวิธีการสร้าง marker หลายตัวโดยการ ค้นหา จาก DB ลงบนGoogle map api ครับ

ขอวิธีการสร้าง marker หลายตัวโดยการ ค้นหา จาก DB ลงบนGoogle map api ครับ

 ผมต้องการที่จะ  Search หาจากสถานที่ ใน DB แล้ว นำ สถานที่ที่ค้นหาได้ ไปสร้างตัว marker ในแผนที่นะครับ เช่น ผมจะค้นหา คำว่า วัด ใน DB  แล้ว ให้ วัด ทั้งหมด ใน DB ไป โชว์ ในแผนที่ นะครับ พอมีแนวทางไหนบ้างครับ ผมอ่านเจอ  สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ แล้วผมไม่รู้จะเอามาปรับใช้ยังไงครับ เพราะ ผมส่งตัวแปร จากฟอร์มไปให้ คำสัง ใน xml ไม่ได้นะครับ   ขอความช่วยเหลือหน่อยครับ จะทำโปรเจคจบนะครับ 



Mazda03 115.87.7.xxx 14-10-2013 20:20:21

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

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


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


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

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

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

 
ตัวอย่าง ไฟล์ genMarker.php รองรับการรับค่าจากการค้นหา
 
<?php
header("Content-type:text/xml; charset=UTF-8");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<markers>
<?php
$q_search="";
if(isset($_POST['data_search']) && $_POST['data_search']!=""){
	$q_search=" AND province_name like '%".$_POST['data_search']."%' ";
}
$q="SELECT * FROM province_latlng WHERE 1 $q_search ORDER BY province_id LIMIT 30 ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
	<marker id="<?=$rs['province_id']?>">
        <name><?=$rs['province_name']?></name>
        <latitude><?=$rs['province_lat']?></latitude>
        <longitude><?=$rs['province_lon']?></longitude>
    </marker>
<?php } ?>
</markers>
 
 
ไฟล์แสดงแผนที่จากการค้นหา test_search.php
 
<!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:450px;
	height:500px;
	margin:auto;
	margin-top:50px;
}
#form_search_data { 
	width:450px;
	height:50px;
	margin:auto;
	margin-top:10px;
}
</style>


</head>

<body>
    <div id="form_search_data">
      <form id="form_search_map_data" name="form_search_map_data" method="post" action="">
        <input type="text" name="data_search" id="data_search" />
        <input type="submit" name="bt_search" id="bt_search" value="Search" />
      </form>
    </div>
    <div id="map_canvas"></div>
 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
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]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 7, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
		mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
			position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
			style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 
		}
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	$.ajax({
		url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
		type: "POST", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php
		data: { data_search : encodeURIComponent(<?=$_POST['data_search']?>) },
		dataType: "xml",
		success:function(xml){
			$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
					var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerLng=$(this).find("longitude").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน			
					var markerLatLng=new GGM.LatLng(markerLat,markerLng);
					var my_Marker = new GGM.Marker({ // สร้างตัว marker
						position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
						map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
						title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
					});
				//	console.log($(this).find("id").text());
			});
		}	
	});		

}
$(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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


ninenik 27.130.40.xxx 15-10-2013
 ความคิดเห็นที่ 2

แก้ไข บรรทัดนี้ ใส่ "" เข้าไปด้วย

data: { data_search : encodeURIComponent(<?=$_POST['data_search']?>) },  

data: { data_search : encodeURIComponent("<?=$_POST['data_search']?>") },

 



ninenik 27.130.40.xxx 15-10-2013
 ความคิดเห็นที่ 3

 ขอบคุณมากครับ เดี๋ยวลองทำดูครับ



mazda03 119.160.221.xxx 15-10-2013 11:59
 ความคิดเห็นที่ 4

ช่วยอธิบาย ตรงไฟล์ genmarker.php บรรทัด 12 - 16  หน่อยครับ   ไม่ค่อยเข้าใจ  ผมปรับโค้ต นิดหน่อย  แผนที่ขึ้นแต่ เมือ search แล้ว marker ไม่ขึ้นนะครับ



mazda03 115.87.50.xxx 15-10-2013 21:23
 ความคิดเห็นที่ 5 
// กำหนดตัวแปรสำหรับ เก็บค่าคำสั่งการค้นหาเพิ่มเติม เริ่มต้น ให้เป็นค่าว่าง
$q_search="";  

// ถ้ามีการส่งค่าตัวแปร โดยการกดปุ่ม submit ให้ดูค่าที่ส่งมีค่าหรือไม่
if(isset($_POST['data_search']) && $_POST['data_search']!=""){  
    $q_search=" AND province_name like '%".$_POST['data_search']."%' ";  
}  
// ถ้ามีค่า ก็ให้เพิ่มเงื่อนไขคำสั่งกาาค้นหาในตัวแปร ที่กำหนดตอนแรก
// ในตัวอย่างด้านบนคือ เมื่อการส่ง ค่าที่ต้องการค้นหาเข้ามา ให้ไปค้นฟิลด์ province_name
// ว่ามีค่าตามที่ค้นหาหรือไม่

// ส่วนนี้เป็นการรวมคำสั่งการค้นหาทั้งหมดเข้าด้วยกัน
// หรือ เท่ากับ $q="SELECT * FROM province_latlng WHERE 1  AND province_name like '%".$_POST['data_search']."%'  ORDER BY province_id LIMIT 30 ";  

$q="SELECT * FROM province_latlng WHERE 1 $q_search ORDER BY province_id LIMIT 30 ";


ninenik 27.130.40.xxx 16-10-2013
 ความคิดเห็นที่ 6

ช่วยดูให้หน่อยครับ ยังไม่ได้เลย เหมือน ค่า POST ไม่ยอมไปให้  ถ้ากด search  ค่าว่าง  จะขึ้น marker  ทั้ง DB ครับ แต่ พอกรอกชื่อสถานที่ไป กลับไม่ขึ้นอะไรเลยครับ   ตอนนี้ โค้ตที่ให้มา ผมแก้เฉพาะ ตรง DB ให้อ่านค่าของผมได้นะครับ อย่างอื่นไม่ได้แก้อะไรเลย  ผมแทรกโค้ดไม่ได้ เดี๋ยวใส่ให้ดูครับ

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


mazda03 119.160.214.xxx 16-10-2013 15:25
 ความคิดเห็นที่ 7 
 

โค้ดครับ ผมจะลองโค้ดเดิมๆให้ผ่านก่อนนะครับ แต่ตอนนี้เหมือนจะไม่ผ่าน ไม่รู้ว่าติดตรงไหน 

 

ไฟล์ genMarker.php 

<?php

header("Content-type:text/xml; charset=UTF-8");              

header("Cache-Control: no-store, no-cache, must-revalidate");             

header("Cache-Control: post-check=0, pre-check=0", false);   

mysql_connect("localhost","root","root") or die("Cannot connect the Server");

mysql_select_db("nipontour") or die("Cannot select database");

mysql_query("set character set utf8");

echo '<?xml version="1.0" encoding="utf-8"?>';

?>

<markers>

<?php

$q_search="";

if(isset($_POST['data_search']) && $_POST['data_search']!=""){

$q_search=" AND attractions_name like '%".$_POST['data_search']."%' ";

}

$q="SELECT * FROM attractions WHERE 1 $q_search ORDER BY attractions_id LIMIT 30 ";

$qr=mysql_query($q);

while($rs=mysql_fetch_array($qr)){

?>

<marker id="<?=$rs['attractions_id']?>">

        <name><?=$rs['attractions_name']?></name>

        <latitude><?=$rs['lat']?></latitude>

        <longitude><?=$rs['long']?></longitude>

    </marker>

<?php } ?>

</markers>

ไฟล์ map.php

<!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" />

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

 

<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:450px;

height:500px;

margin:auto;

margin-top:50px;

}

#form_search_data { 

width:450px;

height:50px;

margin:auto;

margin-top:10px;

}

</style>

 

 

</head>

 

<body>

    <div id="form_search_data">

      <form id="form_search_map_data" name="form_search_map_data" method="post" action="">

        <input type="text" name="data_search" id="data_search" />

        <input type="submit" name="bt_search" id="bt_search" value="Search" />

      </form>

    </div>

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

 

<script type="text/javascript">

var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้

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]; 

// กำหนด Option ของแผนที่

var myOptions = {

zoom: 7, // กำหนดขนาดการ zoom

center: my_Latlng , // กำหนดจุดกึ่งกลาง

mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่

mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่

position:GGM.ControlPosition.TOP, // จัดตำแหน่ง

style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 

}

};

map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

$.ajax({

url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml

type: "POST", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php

data: { data_search : encodeURIComponent("<?=$_POST['data_search']?>") },  

dataType: "xml",

success:function(xml){

$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker

var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน

var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน

var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน

var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน

var markerLatLng=new GGM.LatLng(markerLat,markerLng);

var my_Marker = new GGM.Marker({ // สร้างตัว marker

position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง

map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map

title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ

});

// console.log($(this).find("id").text());

});

}

});

 

}

$(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>

 

 

 
 
 
 

 

 

  



mazda03 119.160.214.xxx 16-10-2013 15:31
 ความคิดเห็นที่ 8

 เดี๋ยวเพิ่ม บทความพร้อมโฟล์โหลดไปลองเล่นดู



ninenik 115.67.4.xxx 16-10-2013
 ความคิดเห็นที่ 9
 

 ค้นหาสถานที่ ในฐานข้อมูล และแสดง ตำแหน่งบนแผนที่ google map แบบง่าย

 https://www.ninenik.com/content.php?arti_id=455 via @ninenik



ninenik 115.67.4.xxx 16-10-2013
1 2 Next







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