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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การ 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 31-10-2014 18:35:31

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

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

ที่ผมเห็นมี น่าจะผิดหนึ่งจุด ไม่รู้เกี่ยวป่าว

ดูบรรทัด 104

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

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

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

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

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

wowowow 31-10-2014 20:41

ความคิดเห็นที่ 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 31-10-2014 20:57

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

อีกอันที่เห็น บรรทัด 111

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

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

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

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

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

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