Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > เกี่ยวกับเรื่อง google map ค่ะ ต้องการให้ marker เปลี่ยนรูปตามเงื่อนไขที่เรากำหนดค่ะ



 

เกี่ยวกับเรื่อง google map ค่ะ ต้องการให้ marker เปลี่ยนรูปตามเงื่อนไขที่เรากำหนดค่ะ

 



Topic : 086178

Guest




เกี่ยวกับเรื่อง google map ค่ะ ต้องการให้ marker เปลี่ยนรูปตามเงื่อนไขที่เรากำหนดค่ะ

เกี่ยวกับเรื่อง google map ค่ะ ต้องการให้ marker เปลี่ยนรูปตามเงื่อนไขที่เรากำหนดค่ะ โดยต้องรับค่าจาก [font=Verdana]$num[$i][/font] ซึ่งค่านี้มีจำนวนตัวเลขที่ไม่เท่ากันของทุก 76 จังหวัดจึงต้องการนำตัวเลขที่ได้นี้มาทำเงื่อนไขว่า
1. ถ้าจำนวนตัวเลข >= 10 ให้แสดงเป็น marker สีเขียว
2. ถ้าจำนวนตัวเลข >= 30 ให้แสดงเป็น marker สีเหลือง
3. ถ้าจำนวนตัวเลข >= 50 ให้แสดงเป็น marker สีแดง
หนูลองทำเป็น if else แต่ทำไม่ถูกสักทีงมมานานแล้วค่ะช่วยหน่อยนะค่ะ

Google map
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google map</title>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHUnP1KCbp6ebWp4h1pnaDxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR_neyUsr7fgf_tE45tUGCOses04A"
         type="text/javascript"></script>
        <script type="text/javascript">
	
	     // Create our "cafe" marker icon
	/* var  Iconred = new GIcon();
         Iconred.image = "../image/red";//ดึงรูปมาจาก
         Iconred.iconSize = new GSize(20, 20); //ขนาดของ icon 
         Iconred.iconAnchor = new GPoint(6, 20); //คือการกำหนดจุดตรงปลาย marker ที่จะปักลงบนแผนที่ (ตำแหน่งของจุด, ความห่าง)
         Iconred.infoWindowAnchor = new GPoint(5, 1);//คือตำแหน่งที่จะให หน้าต่างออกมาจาก marker (ตำแหน่งของจุด, ความห่าง)
         // Set up our GMarkerOptions object literal
        markerOptions = { icon:Iconred }; */
	 var Icongreen = new GIcon();
         Icongreen.image = "../image/hospital";//ดึงรูปมาจาก
         Icongreen.iconSize = new GSize(25, 25); //ขนาดของ icon 
         Icongreen.iconAnchor = new GPoint(6, 20); //คือการกำหนดจุดตรงปลาย marker ที่จะปักลงบนแผนที่ (ตำแหน่งของจุด, ความห่าง)
         Icongreen.infoWindowAnchor = new GPoint(5, 1);//คือตำแหน่งที่จะให หน้าต่างออกมาจาก marker (ตำแหน่งของจุด, ความห่าง)
         // Set up our GMarkerOptions object literal
        markerOptions = { icon:Icongreen }; 


	function initialize(){
	            //Gmap2 คือ วัตถุพื้นฐานในการแผนที่
	    map =  new GMap2(document.getElementById("map")); //การสร้างแผนที่ให้กับเว็บ โดยนำไปแสดงที่ Element ที่มี id คือ map
		map.setCenter(new GLatLng(15.347762,100.973694), 6); //กำหนดละติจูดและลองติจูด ที่ใช้เป็นตำแหน่งศูนย์กลางของแผนที่ 9 คือระยะการซูม
		//map.removeMapType(G_NORMAL_MAP); //กำหนดประเภทของแผนที่ว่าจะให้เป็น ดาวเทียม,แผนที่ หรือ ภูมิประเทศ
		map.setUIToDefault();  //แสดงตัวควบคุมแผนที่พื้นฐาน
		loadmarker();
		
	} //function initialize
	//######################โหลดพิกัดจากฐานข้อมูลมาแสดง
	function loadmarker(){
	//map.clearOverlays();
		// สร้าง XmlHttpReques คือการดึงข้อมูลแบบหลังฉาก
		var request =    GXmlHttp.create(); 
		
		//กำหนดวิธีการดึงข้อมูลแบบ get (new Date().getTime() คือการแก้ปัญหา caching) false คือ การรอให้ server ตอบสนองกลับมาก่อนแล้วจึงประมวลผลสคริปต์ต่อไป
		request.open("GET", "../connect/db_show_map.php?task=load"+"&dummy=" + (new Date()).getTime(), false); 
		//ทำการดึงข้อมูลจริงจาก server (null คือค่าพิเศษใน javascript หมายถึงการไม่มีค่า)		
		request.send(null); 
		//GXmlคือการวิเคราะห์ข้อมูล responseText คือ การอ่านข้อมูลแบบข้อความ			
		var xml =   GXml.parse(request.responseText); 
		//การเข้าถึง tag Marker ที่อยู่ใน หน้า	
		var db_marker = xml.documentElement.getElementsByTagName("Marker"); 
		for(var i=0;i<db_marker.length;i++){   //วนลูบเพื่อสร้าง marker จนกว่าจะหมด	
		
        //การกำหนดพิกัดที่จะให้ marker แสดงผล
		var point = new GLatLng(parseFloat(db_marker[i].getAttribute("lat")),
                                parseFloat(db_marker[i].getAttribute("lng")));
		
		//การสร้างรายละเอียดเกี่ยวกับ marker บนแผนที่
		var id = db_marker[i].getAttribute("lt"); //การเข้าถึงตัวแปร id ใน tag Marker จากหน้า db_show_map.php
		var marker = createMarker(point, id);  //เรียกใช้ ฟังก์ชั่น createMarker ซึ่งใช้สร้างรูปแบบของ ตัวmarker
		
		
		marker.lt = db_marker[i].getAttribute("lt");
		marker.count= db_marker[i].getAttribute("count");
		marker.id= db_marker[i].getAttribute("id");
		
		
		GEvent.addListener(marker, "click", function() {   //กำหนดลักษณะของเหตุการณ์ ในที่นี้คือ click ที่ตัว marker
    		this.openInfoWindowHtml("<div align=Left>จ."+ this.lt + " "+"<br>เกิดอุบัติเหตุทั้งหมด"+"  "+ this.count + " ครั้ง"+ "<br>ที่มา: สำนักงานปลัดกระทรวงคมนาคม  ");  //ต้องเพื่มตัว sql เข้ามาอันนี้คือตัวอย่างการแสดงผล

		    
  		});
		map.addOverlay(marker);	//ให้แสดง marker เข้าไปในแผนที่	
		}	
	} 
	
	function createMarker(point){
		var marker = new GMarker(point, (markerOptions)); // ตำแหน่ง และ แผนที่ที่จะให้ปักหมุดลงไป 
		return marker; 
	
	}
    </script>
</head>
<body onload="initialize()"> 
    <div id="map" style="width: 737px; height: 530px"></div>
</body>
<?php  
    //session_start();
	//header('Content-Type: text/html; charset=utf-8');  //บอกให้บราวเซอร์รู้ว่ารูปแบบอักษรคือutf-8
	$conn = mysql_connect("127.0.0.1","root","1234"); //เชื่อมต่อฐานข้อมูล
			mysql_select_db("lopburi_accident", $conn);	  //เลือกใช้ฐานข้อมูล
			mysql_query("SET NAMES 'utf8'");		//ตั้งค่าภาษาให้กับเพจ
			
	  
	switch ($task){
		case "load" : load();break;	
		
	}
	function load(){
	
$newMonth = sprintf("%02d",$_POST["month"]); //หมายถึงให้เติมตัวเลข 0 ข้างหน้าไม่เกิน 2 หลัก
$newYear =  sprintf("%d",($_POST["year"]-543)); //ให้ผลลัพธ์ได้เป็น คศ
//echo "newMonth=".$newMonth."<br>";
//echo "newYear=".$newYear."<br>";
$DateYear = sprintf("%s_%s.txt",$newMonth,$newYear); // "%s_%s" เป็นค่าคั่นอยู่ระหว่างกลาง
//echo "DateYear=".$DateYear."<br>";	
$absPath = "c:\\appserv\\www\\accident\\admin\\detail_date_count\\";
$sourceFile = sprintf("%s%s",$absPath,$DateYear);
//echo $sourceFile;
$dstFile = sprintf("%sdisplay.txt",$absPath);
$cliCmd = sprintf("copy /y %s %s",$sourceFile,$dstFile);
exec($cliCmd);

 $i = 1;
	 $lines = file('../admin/detail_date_count/display.txt'); //.$DateYear.'
foreach($lines as $line)
{
	  $num[$i] = substr($line,strpos($line,",")+1,3);
	$i++;
}
     			
 		
	 $sql = "SELECT
  `location`.`lt_province`,`location`.`lt_id`,`location`.`lat`, `location`.`lng`
FROM
  `location`"; 
	$result = mysql_query($sql);
	//header("Content-type: text/xml");
	echo "<DATA>";
		$i = 1;
		while($row = mysql_fetch_assoc($result)){		
			
      // ค่าแสดงผล
	    echo "<Marker lt='$row[lt_province]' count='$num[$i]' id='$row[lt_id]' lat='$row[lat]' lng='$row[lng]'/>";
	    $i++;
		}
	echo "</DATA>";
	}	
?>
</html>




Tag : PHP






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-11-02 14:01:40 By : nun View : 1777 Reply : 3
 

 

No. 1



โพสกระทู้ ( 21 )
บทความ ( 0 )



สถานะออฟไลน์


ช่วยหน่อยค่ะทำมาหลายวันแล้วยังไม่ได้เลย..


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-11-04 10:06:39 By : Duangrawee
 


 

No. 2



โพสกระทู้ ( 11 )
บทความ ( 0 )



สถานะออฟไลน์


อยากได้ด้วยค่ะ กำลังติดตรงนี้เลย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-02-19 12:19:44 By : oil
 

 

No. 3



โพสกระทู้ ( 1,463 )
บทความ ( 1 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Blogger

ต้องส่งค่า count ไปให้ createMarker ครับ

var marker = createMarker(point, id, db_marker[i].getAttribute("count")); //เรียกใช้ ฟังก์ชั่น createMarker ซึ่งใช้สร้างรูปแบบของ ตัวmarker


function createMarker(point, id, count) {
var options = markerOptions;
if (count >= 30){
options.icon = Iconyellow;
}elseif (count >= 50){
options.icon = Iconred;
}
var marker = new GMarker(point, (options)); // ตำแหน่ง และ แผนที่ที่จะให้ปักหมุดลงไป
return marker;

}



Code (JavaScript)
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHUnP1KCbp6ebWp4h1pnaDxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR_neyUsr7fgf_tE45tUGCOses04A"
    type="text/javascript"></script>
    <script type="text/javascript">

        // Create our "cafe" marker icon
        /* var  Iconred = new GIcon();
         Iconred.image = "../image/red";//ดึงรูปมาจาก
         Iconred.iconSize = new GSize(20, 20); //ขนาดของ icon 
         Iconred.iconAnchor = new GPoint(6, 20); //คือการกำหนดจุดตรงปลาย marker ที่จะปักลงบนแผนที่ (ตำแหน่งของจุด, ความห่าง)
         Iconred.infoWindowAnchor = new GPoint(5, 1);//คือตำแหน่งที่จะให หน้าต่างออกมาจาก marker (ตำแหน่งของจุด, ความห่าง)
         // Set up our GMarkerOptions object literal
         markerOptions = { icon:Iconred }; */
        var Icongreen = new GIcon();
        Icongreen.image = "../image/green.png";//ดึงรูปมาจาก
        Icongreen.iconSize = new GSize(25, 25); //ขนาดของ icon 
        Icongreen.iconAnchor = new GPoint(6, 20); //คือการกำหนดจุดตรงปลาย marker ที่จะปักลงบนแผนที่ (ตำแหน่งของจุด, ความห่าง)
        Icongreen.infoWindowAnchor = new GPoint(5, 1);//คือตำแหน่งที่จะให หน้าต่างออกมาจาก marker (ตำแหน่งของจุด, ความห่าง)
        var Iconyellow = new GIcon();
        Iconyellow.image = "../image/yellow.png";//ดึงรูปมาจาก
        Iconyellow.iconSize = new GSize(25, 25); //ขนาดของ icon 
        Iconyellow.iconAnchor = new GPoint(6, 20); //คือการกำหนดจุดตรงปลาย marker ที่จะปักลงบนแผนที่ (ตำแหน่งของจุด, ความห่าง)
        Iconyellow.infoWindowAnchor = new GPoint(5, 1);//คือตำแหน่งที่จะให หน้าต่างออกมาจาก marker (ตำแหน่งของจุด, ความห่าง)
        var Iconred = new GIcon();
        Iconred.image = "../image/red.png";//ดึงรูปมาจาก
        Iconred.iconSize = new GSize(25, 25); //ขนาดของ icon 
        Iconred.iconAnchor = new GPoint(6, 20); //คือการกำหนดจุดตรงปลาย marker ที่จะปักลงบนแผนที่ (ตำแหน่งของจุด, ความห่าง)
        Iconred.infoWindowAnchor = new GPoint(5, 1);//คือตำแหน่งที่จะให หน้าต่างออกมาจาก marker (ตำแหน่งของจุด, ความห่าง)
        // Set up our GMarkerOptions object literal
        markerOptions = {icon: Icongreen};


        function initialize() {
            //Gmap2 คือ วัตถุพื้นฐานในการแผนที่
            map = new GMap2(document.getElementById("map")); //การสร้างแผนที่ให้กับเว็บ โดยนำไปแสดงที่ Element ที่มี id คือ map
            map.setCenter(new GLatLng(15.347762, 100.973694), 6); //กำหนดละติจูดและลองติจูด ที่ใช้เป็นตำแหน่งศูนย์กลางของแผนที่ 9 คือระยะการซูม
            //map.removeMapType(G_NORMAL_MAP); //กำหนดประเภทของแผนที่ว่าจะให้เป็น ดาวเทียม,แผนที่ หรือ ภูมิประเทศ
            map.setUIToDefault();  //แสดงตัวควบคุมแผนที่พื้นฐาน
            loadmarker();

        } //function initialize
        //######################โหลดพิกัดจากฐานข้อมูลมาแสดง
        function loadmarker() {
            //map.clearOverlays();
            // สร้าง XmlHttpReques คือการดึงข้อมูลแบบหลังฉาก
            var request = GXmlHttp.create();

            //กำหนดวิธีการดึงข้อมูลแบบ get (new Date().getTime() คือการแก้ปัญหา caching) false คือ การรอให้ server ตอบสนองกลับมาก่อนแล้วจึงประมวลผลสคริปต์ต่อไป
            request.open("GET", "../connect/db_show_map.php?task=load" + "&dummy=" + (new Date()).getTime(), false);
            //ทำการดึงข้อมูลจริงจาก server (null คือค่าพิเศษใน javascript หมายถึงการไม่มีค่า)		
            request.send(null);
            //GXmlคือการวิเคราะห์ข้อมูล responseText คือ การอ่านข้อมูลแบบข้อความ			
            var xml = GXml.parse(request.responseText);
            //การเข้าถึง tag Marker ที่อยู่ใน หน้า	
            var db_marker = xml.documentElement.getElementsByTagName("Marker");
            for (var i = 0; i < db_marker.length; i++) {   //วนลูบเพื่อสร้าง marker จนกว่าจะหมด	

                //การกำหนดพิกัดที่จะให้ marker แสดงผล
                var point = new GLatLng(parseFloat(db_marker[i].getAttribute("lat")),
                        parseFloat(db_marker[i].getAttribute("lng")));

                //การสร้างรายละเอียดเกี่ยวกับ marker บนแผนที่
                var id = db_marker[i].getAttribute("lt"); //การเข้าถึงตัวแปร id ใน tag Marker จากหน้า db_show_map.php
                var marker = createMarker(point, id, db_marker[i].getAttribute("count"));  //เรียกใช้ ฟังก์ชั่น createMarker ซึ่งใช้สร้างรูปแบบของ ตัวmarker


                marker.lt = db_marker[i].getAttribute("lt");
                marker.count = db_marker[i].getAttribute("count");
                marker.id = db_marker[i].getAttribute("id");


                GEvent.addListener(marker, "click", function () {   //กำหนดลักษณะของเหตุการณ์ ในที่นี้คือ click ที่ตัว marker
                    this.openInfoWindowHtml("<div align=Left>จ." + this.lt + " " + "<br>เกิดอุบัติเหตุทั้งหมด" + "  " + this.count + " ครั้ง" + "<br>ที่มา: สำนักงานปลัดกระทรวงคมนาคม  ");  //ต้องเพื่มตัว sql เข้ามาอันนี้คือตัวอย่างการแสดงผล


                });
                map.addOverlay(marker);	//ให้แสดง marker เข้าไปในแผนที่	
            }
        }

        function createMarker(point, id, count) {
            var options = markerOptions;
            if (count >= 30){
                options.icon = Iconyellow;
            }elseif (count >= 50){
                options.icon = Iconred;
            }
            var marker = new GMarker(point, (options)); // ตำแหน่ง และ แผนที่ที่จะให้ปักหมุดลงไป 
            return marker;

        }
    </script>
</head>
<body onload="initialize()"> 
    <div id="map" style="width: 737px; height: 530px"></div>
</body>
<?php
//session_start();
//header('Content-Type: text/html; charset=utf-8');  //บอกให้บราวเซอร์รู้ว่ารูปแบบอักษรคือutf-8
$conn = mysql_connect("127.0.0.1", "root", "1234"); //เชื่อมต่อฐานข้อมูล
mysql_select_db("lopburi_accident", $conn);   //เลือกใช้ฐานข้อมูล
mysql_query("SET NAMES 'utf8'");  //ตั้งค่าภาษาให้กับเพจ


switch ($task) {
    case "load" : load();
        break;
}

function load() {

    $newMonth = sprintf("%02d", $_POST["month"]); //หมายถึงให้เติมตัวเลข 0 ข้างหน้าไม่เกิน 2 หลัก
    $newYear = sprintf("%d", ($_POST["year"] - 543)); //ให้ผลลัพธ์ได้เป็น คศ
//echo "newMonth=".$newMonth."<br>";
//echo "newYear=".$newYear."<br>";
    $DateYear = sprintf("%s_%s.txt", $newMonth, $newYear); // "%s_%s" เป็นค่าคั่นอยู่ระหว่างกลาง
//echo "DateYear=".$DateYear."<br>";	
    $absPath = "c:\\appserv\\www\\accident\\admin\\detail_date_count\\";
    $sourceFile = sprintf("%s%s", $absPath, $DateYear);
//echo $sourceFile;
    $dstFile = sprintf("%sdisplay.txt", $absPath);
    $cliCmd = sprintf("copy /y %s %s", $sourceFile, $dstFile);
    exec($cliCmd);

    $i = 1;
    $lines = file('../admin/detail_date_count/display.txt'); //.$DateYear.'
    foreach ($lines as $line) {
        $num[$i] = substr($line, strpos($line, ",") + 1, 3);
        $i++;
    }


    $sql = "SELECT
  `location`.`lt_province`,`location`.`lt_id`,`location`.`lat`, `location`.`lng`
FROM
  `location`";
    $result = mysql_query($sql);
    //header("Content-type: text/xml");
    echo "<DATA>";
    $i = 1;
    while ($row = mysql_fetch_assoc($result)) {

        // ค่าแสดงผล
        echo "<Marker lt='$row[lt_province]' count='$num[$i]' id='$row[lt_id]' lat='$row[lat]' lng='$row[lng]'/>";
        $i++;
    }
    echo "</DATA>";
}
?>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-02-20 06:49:50 By : num
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : เกี่ยวกับเรื่อง google map ค่ะ ต้องการให้ marker เปลี่ยนรูปตามเงื่อนไขที่เรากำหนดค่ะ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่