PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การ mark maps จากฐานข้อมูลตามเงื่อนไขที่ได้จากการ search

การ mark maps จากฐานข้อมูลตามเงื่อนไขที่ได้จากการ search
นี่คือโค้ดที่สร้างไฟล์ xml ค่ะ คือใส่ค่า latitude,longtitude และ distance(รัศมีที่ต้องการให้ค้นหา)แล้วก็เลือกค่า latitude,longitudeเฉพาะที่อยู่ในเงื่อนไขที่กำหนดแล้วนำมา mark ใน maps ซึ่งไฟล์ xml ก็แสดงค่าที่ต้องการออกมาได้ค่ะ แต่ตอนที่จะนำไป mark ในแผนที่มันกลับไม่ขึ้นตัว mark ให้ค่ะ มันโชว์แต่แผนที่ รบกวนช่วยดูให้หน่อยนะคะว่ามีจุดผิดตรงไหนโค้ดแรกคือ โค้ดสร้างไฟล์ xml ค่ะ ส่วนโค้ดที่สองคือ โค้ดแสดงแผนที่ค่ะ

โค้ดแรก
<?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);     
	//header("Location: mapmapMarker1.php"); 
    mysql_connect("localhost","root","apap777") or die("Cannot connect the Server");  
    mysql_select_db("ap") or die("Cannot select database");  
    mysql_query("set character set utf8");  
    echo '<?xml version="1.0" encoding="utf-8"?>';  
?>  
    <markers>  
<?php  
	$radius = 6371;
	$lat = $_POST['latvalue'];
	$long = $_POST['longvalue'];
	$distance = $_POST['distance'];
	
	
	// latitude boundaries
	$maxlat = $lat + rad2deg($distance / $radius);
	$minlat = $lat - rad2deg($distance / $radius);
	
	// longitude boundaries (longitude gets smaller when latitude increases)
	$maxlong = $long + rad2deg($distance / $radius / cos(deg2rad($lat)));
	$minlong = $long - rad2deg($distance / $radius / cos(deg2rad($lat)));

    $q="SELECT * FROM latlong  WHERE Latitude between $minlat and $maxlat 
								 and Longtitude between $minlong and $maxlong";  
    $qr=mysql_query($q);  
    while($rs=mysql_fetch_array($qr)){  
?>  
        <marker>  
            <name><?=$rs['APname']?></name>
		    <Latitude><?=$rs['Latitude']?></Latitude>
            <Longtitude><?=$rs['Longtitude']?></Longtitude>  
        </marker>  
<?php } ?>  
    </markers>




  
โค้ดที่สอง
<!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;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 
<script type="text/javascript" src="jquery-1.11.1.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:"mapgenMarker1.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
		dataType: "xml",
		success:function(xml){
			$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
					var markerName=$(this).find("APname").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
					var markerLatitude=$(this).find("Latitude").text();					
					var markerLongtitude=$(this).find("Longtitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน	
					var markerLatLng=new GGM.LatLng(markerLatitude,markerLongtitude);
					var my_Marker = new GGM.Marker({ // สร้างตัว marker
						position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
						map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
						title:markerAPname // แสดง 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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>


โดย:  So_ployy@hotmail.com IP: 1.46.11.xxx วันที่: 31-10-2014 เวลา: 18:35:31

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 6
ตอนนี้แก้จนมันแสดงตัว mark ได้แล้วค่ะ
แก้ตามที่คุณ wowowow บอก แล้วก็แก้ตรงโค้ดนิดหน่อย ขอบคุณมากนะคะ ที่มาช่วยตอบ

โดย:  So_ployy@hotmail.com IP: 1.46.198.xxx วันที่: 01-11-2014 เวลา: 18:11:04
 ความคิดเห็นที่ 5
ลองเอาโค้ด ที่แก้แล้วมาดูครับ

โดย:  Wowowow IP: 171.96.245.xxx วันที่: 01-11-2014 เวลา: 15:47:48
 ความคิดเห็นที่ 4
ขอบคุณ คุณ wowowow มากเลยค่ะ ลองแก้ตามที่คุณแนะนำแล้วแต่markยังไม่ขึ้นเลยค่ะ ขึ้นแต่แผนที่

โดย:  So_ployy@hotmail.com IP: 1.46.11.xxx วันที่: 01-11-2014 เวลา: 13:38:12
 ความคิดเห็นที่ 3
อีกอันที่เห็น  บรรทัด 111

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

markerAPname มาจากไหน ไม่รู้ หาไม่เจอ

ผมเดาว่า น่าจะเป็น


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

จะไปใช้ ตัวแปร จาก บรรทัด 104

มาทีละจุด  555 ลองไล่ดู ครับ ผมก็ หัดเขียนเหมือนกัน








โดย:  Wowowow IP: 171.96.245.xxx วันที่: 31-10-2014 เวลา: 21:20:35
 ความคิดเห็นที่ 2

อีกจุด หนึ่ง ที่เห็น  แล้ว มันแปลกๆ ไม่แน่ใจ นะครับ

$.ajax({  
        url:"mapgenMarker1.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml  
        dataType: "xml",  
        success:function(xml){  
            $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                    var markerName=$(this).find("APname").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
                    var markerLatitude=$(this).find("Latitude").text();                   
                    var markerLongtitude=$(this).find("Longtitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                    var markerLatLng=new GGM.LatLng(markerLatitude,markerLongtitude);  
                    var my_Marker = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:markerAPname // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });  
                //  console.log($(this).find("id").text());  
            });  
        }     
    });      


รู้สึกว่า ไม่ได้ส่ง data ไปให้  ไฟล์  mapgenMarker1.php



$.ajax({  
        url:"mapgenMarker1.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml  
        dataType: "xml", 
        data:{ }, // น่าจะหายไป เพิ่ม ค่าใน ปีกกา ด้วย !!!!!!!!!!!!!
        type:"POST", // น่าจะหายไป !!!!!!!!!!
        success:function(xml){  
            $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                    var markerName=$(this).find("APname").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
                    var markerLatitude=$(this).find("Latitude").text();                   
                    var markerLongtitude=$(this).find("Longtitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                    var markerLatLng=new GGM.LatLng(markerLatitude,markerLongtitude);  
                    var my_Marker = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:markerAPname // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });  
                //  console.log($(this).find("id").text());  
            });  
        }     
    });     


โดย:  Wowowow IP: 171.96.245.xxx วันที่: 31-10-2014 เวลา: 20:57:51
 ความคิดเห็นที่ 1
ที่ผมเห็นมี น่าจะผิดหนึ่งจุด ไม่รู้เกี่ยวป่าว

ดูบรรทัด  104

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

มันจะไปเอาค่า ใน บรรทัด 36  มา

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

ลองแก้ ตรงนี้ก่อนนะครับ

แก้ชื่อให้ตรง
var
 markerName=$(this).find("name").text();








โดย:  Wowowow IP: 171.96.245.xxx วันที่: 31-10-2014 เวลา: 20:41:14