PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ผมอยากทำให้ตัว filter ของผม ที่มีแต่ละลิ้ง แสดง icon ที่ผมเก็บเอาไว้ เมื่อคลิก โค้ดนี้ผมมั่วเอานะครับ

ผมอยากทำให้ตัว filter ของผม ที่มีแต่ละลิ้ง แสดง icon ที่ผมเก็บเอาไว้ เมื่อคลิก โค้ดนี้ผมมั่วเอานะครับ
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>MAP Filter</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:100%;  
    height:100%;  
    /*margin:auto;  */
    /*margin-top:50px;  */
}  
</style> 
<style type="text/css">
<!--
body { margin: 0px; }
#header-block { height:30px; position:relative; }
#logo-block { position:absolute; left:0px; }
#menus-block-1 { position:absolute; bottom:1px; left:0px; background-color:#6699FF; padding-top:6px; padding-bottom:5px; padding-left:8px; padding-right:8px; }
#menus-block-1 li { margin:0px; }
 
 
.menus-block { margin:0px; padding:0px; }
.menu, .menuseparator { display:inline; position:relative; padding:4px; margin:0px; font:normal 13px "Microsoft Sans Serif",serif; color:white; }
.menu:hover { background-color:#6699FF; color:white; box-shadow: 2px 2px 3px #000; }
.menu .dropdown { display:none; }
.menu:hover .dropdown { display:block; position:absolute; top:23px; left:0px; }
.menu.disabled { color:gray; opacity:2.0; cursor:default; }
.dropdown { display:block; list-style:none; background-color:#6699FF; color:black; margin:0px; padding:0px; z-index:15; box-shadow: 2px 2px 3px #000; }
.menuitem { padding:4px; }
.menuitem:hover { background-color:white; color:#Black; }
.menuitem .submenu { display: none; }
.menuitem:hover .submenu { display:block; position:absolute; }
.submenu { display:block; list-style:none; background-color:#6699FF; color:black; margin:0px; margin-top:-20px; padding:0px; box-shadow: 2px 2px 3px #000;  z-index:2000; }
 
.menuitem.disabled { color:black; opacity:2.0; cursor:default; }
.menuitem a { color:inherit; text-decoration:none; display:block; }
.externplace {  padding-right:10px; background-image:url(externmarker.png); background-position:100% 50%; background-repeat:no-repeat; }
 
-->
</style> 
  
  
</head>  
  
  
<body onload="gmm_init()">
<div id="header-block">
 
<div id="menus-container">
 
<ul class="menus-block" id="menus-block-1">
<li style="display:block;position:absolute;left:-44px;top:0px;background:url(menucurve.png);width:44px;height:27px;"></li>
<li class="menu" id="mustknow">Filter
<ul class="dropdown" style="width:160px">
<li class="menuitem disabled">7-11</li>
<li class="menuitem disabled">ATM</li>
<li class="menuitem disabled">BUILDING</li>
<li class="menuitem disabled">CAFE-SHOP</li>
<li class="menuitem disabled">CANTEEN</li>
<li class="menuitem disabled">LIBRARY</li>
<li class="menuitem disabled">SPORT PLAYING FIELD</li>
<li class="menuitem hassubmenu">TOILET
<ul class="submenu" style="left:150px; width:160px">
<li class="menuitem "><a Click="JavaScript:fncAlert();" >GENTLEMEN</a></li>
<li class="menuitem disabled">GENTLEMEN</li>
<li class="menuitem disabled">LADY</li>
 
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
 
<script language="javascript">
function fncAlert()
{
$.ajax({    
        url:"NewFile4.js", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml    
        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 markerDate=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน           
                    var narkerIcons=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน             
                    var markerLatLng=new GGM.LatLng(markerLat,markerLng);    
                    var image1 = new GGM.MarkerImage(narkerIcons,  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้    
                    new GGM.Size(22, 30),  //กำหนดความกว้าง สูงของ icons    
                    new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0    
                    new GGM.Point(11, 30)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)    
                    );                    
                    var my_Marker = new GGM.Marker({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        icon: image1, // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml   
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                        title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                    });    
                //  console.log($(this).find("id").text());    
            });    
        }       
    });       
}
 
</script>
 
 
 
 
  
  
  <div id="map_canvas"></div>  
   
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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.726632, 100.774653);  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 18, // กำหนดขนาดการ 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  
  
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี    
    /*if(navigator.geolocation){    
            navigator.geolocation.getCurrentPosition(function(position){    
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน  
                // สรัาง LatLng ตำแหน่ง สำหรับ google map  
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);     
                $.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล  
                    myPosition_lat:myPosition_lat,   // ส่งค่า latitude  
                    myPosition_lon:myPosition_lon  // ส่งค่า longitude  
                },function(){  
                    map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน  
                    map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                                     
                });  
            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
    }else{    
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
    }     
  */
    // ใช้ ajax ดึงค่าจาก xml มาใช้งาน  
    /*$.ajax({    
        url:"NewFile4.jsp", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml    
        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 markerDate=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน           
                    var narkerIcons=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน             
                    var markerLatLng=new GGM.LatLng(markerLat,markerLng);    
                    var image1 = new GGM.MarkerImage(narkerIcons,  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้    
                    new GGM.Size(22, 30),  //กำหนดความกว้าง สูงของ icons    
                    new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0    
                    new GGM.Point(11, 30)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)    
                    );                    
                    var my_Marker = new GGM.Marker({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        icon: image1, // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml   
                        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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});
 
 
 
 
</script>    
</body>  
</html>  


โดย:  Jay2358 IP: 171.6.84.xxx วันที่: 17-09-2014 เวลา: 00:17:54

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
 ดูไม่ออกเลยอะไรเป็นอะไร

ไม่ลองทำเป็นรูปมา แล้วอธิบายดู  

โดย:  Ninenik IP: 1.46.147.xxx วันที่: 17-09-2014