สร้าง div ขึ้นมาเอง

1 การสร้าง user-define div

map object จะมี method drawCustomDiv สำหรับสร้าง div element บนแผนที่

Listing 1.1 คำสั่งในการสร้าง user-define div

var userDivId = mmmap.drawCustomDiv(divElementObject,
latitude, longitude, "titleText");

โดยที่ method drawCustomDiv รับ parameter 4 ตัว ได้แำ่ก่

  1. divElementObject คือ div element object โดยอาจเป็น div element ที่เราได้สร้างขึ้นใมหม่ด้วย method createElement ของ object document
  2. latitude (float) คือ ค่าละติจูด ของตำแหน่งที่เราต้องการวาง div
  3. longitude (float) คือ ค่าลองติจูด ของตำแหน่งที่เราต้องการวาง div
  4. titleText (string) คือ ข้อความสำหรับอธิบาย div ข้อความนี้จะแสดงขึ้นมา เมื่อเราเลื่อน cursor ของ mouse ไปอยู่เหนือ div

Listing 1.2 สร้าง user-define div บนแผนที่

<html>
    <head>
        <title>Example Map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:5px;
                top:85px;
                width:800px;
                height:500px;
                border:0px;
            }
            /* class style สำหรับ user-define div */
            .userDivStyle{
                border:2px solid #FF0000;
                background-color:#FFFFFF;              
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=b88e663af42b0db6d4761f6ac4eadd81">
        </script>
        <script type="text/javascript">

            var mmmap;

            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv,
                13.767734, 100.5351375, 3, "normal");
                
                //เรียก funtion createDiv เพื่อสร้าง user-define div
                createDiv();
            }
            
            //function สำหรับสร้าง user-define div
            function createDiv(){
                //สร้าง div element
                var userDiv = document.createElement("div");
                //กำหนด attrbute class ของ div element เท่ากับ userDivStyle
                //ซึ่งเป็น class style ที่ได้สร้างไว้ใน style tag
                userDiv.className = "userDivStyle";
                //กำหนดข้อความที่จะแสดงใน div element
                userDiv.innerHTML = "user-define div";
                //วาด div element บนแผนที่
                var userDivId = mmmap.drawCustomDiv(userDiv, 
                13.767734, 100.5351375, "user-define div");
            }

        </script>
    </head>
    <body onload="initialize()">
        <div id="mmMapDiv"></div>
    </body>
</html>

2 การลบ user-define div

map object มี method removeCustomDivs สำหรับลบ user-define div

Listing 2.1 คำสั่งในการลบ user-define div 

mmmap.removeCustomDivs(userDivId);

โดยที่ method removeCustomDivs รับ parameter 1 ตัว คือ userDivId ซึ่งเป็นค่า id ของ user-define div ที่ได้สร้างไว้ ค่า id นี้เป็นค่าที่ส่งคืนมาจาก method drawCustomDiv เป็นจำนวนเต็ม (integer)

Listing 2.2 ลบ user-define div เมื่อคลิกที่ user-define div เอง

<html>
    <head>
        <title>Example Map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:5px;
                top:85px;
                width:800px;
                height:500px;
                border:0px;
            }
            /* class style สำหรับ user-define div */
            .userDivStyle{
                border:2px solid #FF0000;
                background-color:#FFFFFF;              
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=b88e663af42b0db6d4761f6ac4eadd81">
        </script>
        <script type="text/javascript">

            var mmmap;

            var userDivId;

            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal");
                
                //เรียก funtion createDiv เพื่อสร้าง user-define div
                createDiv();
            }
            
            //function สำหรับสร้าง user-define div
            function createDiv(){
                //สร้าง div element
                var userDiv = document.createElement("div");
                //กำหนด attrbute class ของ div element เท่ากับ userDivStyle
                //ซึ่งเป็น class style ที่ได้สร้างไว้ใน style tag
                userDiv.className = "userDivStyle";
                //กำหนดข้อความที่จะแสดงใน div element
                userDiv.innerHTML = "user-define div";
                //ผูก function removeDiv เข้ากับ event onclick ของ div element
                userDiv.onclick = removeDiv;
                //วาด div element บนแผนที่
                userDivId = mmmap.drawCustomDiv(userDiv, 13.767734, 100.5351375, "user-define div");
            }

            //function สำหรับลบ user-define div
            function removeDiv(){
                mmmap.removeCustomDivs(userDivId);
            }

        </script>
    </head>
    <body onload="initialize()">
        <div id="mmMapDiv"></div>
    </body>
</html>
  • 3954 reads