Tutorial: แนะนำการใช้งาน MM Map API เบื้องต้น

การสร้างแผนที่ด้วย MM Map API

การสร้างแผนที่ด้วย MM Map API

top

4 ขั้นตอนง่าย ๆ ในการสร้างแผนที่บน website ของคุณเองด้วย MM Map API

เพิ่ม MM Map API โดยใช้ JavaScript tag
สร้าง div element ที่มี attribute id เท่ากับ mmMapDiv สำหรับวางแผนที่
สร้าง JavaScript function ไว้สำหรับสร้าง map object
สร้าง map object ขึ้นมาเมื่อเกิด event onload ของ body tag

1. เพิ่ม MM Map API JavaScript library เข้าไปใน web page file

top

สร้าง html file ขึ้นมา

Listing 1 html file

<html>
  <head>
    <title>create map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  </head>
  <body>

  </body>
</html>

เพิ่ม JavaScript tag เข้าไปในส่วน ของ head tag
โดยให้ attribute src ของ JavaScript tag นี้ มีที่มีค่าเป็น
http://mmmap15.longdo.com/mmmap/mmmap.php?key=xxxxxxxxxxxxxxx
โดยที่ xxxxxxxxxxxxxx คือ key สำหรับการใช้งาน API ของ MM Map
ซึ่งสามารถขอได้จาก website ของ Longdo Map โดยการสมัครเป็น user อ่านรายละเอียดการขอ key MM Map API

Listing 2 JavaScript tag ใน html file

<html>
    <head>
        <title>Example Map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script
         type="text/javascript"
         src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </script>
    </head>
    <body>

    </body>
</html>

จาก Listing 2 ในส่วนของ JavaScript tag ที่เพิ่มเข้าไป จะเห็นได้ว่าค่าของ key เท่ากับ 18b1fbbda1f980b4e368c631a3d317ea

2. สร้าง div element สำหรับวางแผนที่

top

สร้าง div element สำหรับวางแผนที่ โดยกำหนดค่า attribute id ให้กับ div นี้ด้วย เช่น mmMapDiv (จะกำหนดเป็นค่าอื่นก็ได้)

Listing 3 สร้าง div element

    <div id="mmMapDiv"></div>

ต่อมากำหนด style ให้กับ div นี้ ด้วยการสร้าง style tag ไว้ในส่วน head
กำหนด selector เป็นแบบ id ชื่อ mmMapDiv และกำหนดค่าให้กับ property postition, left และ top

Listing 4 กำหนด style ให้กับ div element

<html>
    <head>
        <title>Example Map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        charset=UTF-8">
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px; 
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </script>
    </head>
    <body>
        <div id="mmMapDiv"></div>
    </body>
</html>

3. สร้าง JavaScript function ไว้สำหรับสร้าง map object

top

หลังจากที่เราได้เพิ่ม JavaScript tag เข้าไป จะทำให้เราสามารถเรียกใช้
constructor MMMap เพื่อสร้าง map object
คำสั่งในการการสร้าง map object เป็นดังนี้

Listing 5 คำสั่งในการสร้าง map object

var mmmap;
mmmap = new MMMap(htmlElementObject, latitude, longitude, 
startZoomLevel, mapMode);

จาก Listing 5 ตัวแปร mmap เป็นตัวแปรที่อ้างอิง map oject คุณต้องประกาศตัวแปรด้วยชื่อนี้เท่านั้น

constructor MMMap รับ parameter 5 ตัว ได้แก่

htmlElementObject (object type) คือ html element object ในที่นี้ html element คือ div ซึ่งเราได้ค่านี้มาจากการเข้าถึง html element ด้วย DOM โดยผ่าน object document และ method getElementById ตัวอย่างเช่น
Listing 6 การสร้างตัวแปรเพื่ออ้างอิงถึง div element
```
var mmMapDiv= document.getElementById("mmMapDiv");
```
จาก Listing 6 เราสร้างตัวแปร mmMapDiv เพื่ออ้างอิงกับ element object ทำให้เราสามารถเปลี่ยนแปลงหรือแก้ไขค่าของ div element ที่มี id เป็น mmMapDiv ได้
latitude (float type) คือ ค่าละติจูดของจุดศูนย์กลางแผนที่
longitude (float type) คือ ค่าลองจิจูดของจุดศูนย์กลางแผนที่
startZoomLevel (integer type) คือ ระดับการ zoom เริ่มต้นของแผนที่ ซึ่งสามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 ถึง 14 ตัวเลขที่เพิ่มขึ้นหมายถึงระดับการ zoom ที่เพิ่มขึ้น
mapMode (string type) คือ รูปแบบการแสดงผลของแผนที่ ซึ่งมีสองค่าให้เลือกคือ
- normal แสดงแผนที่แบบปกติ
- hydro แสดงแผนที่แบบลายน้ำ

ต่อไป เราจะสร้าง JavaScript function สำหรับสร้าง map object โดยเริ่มจาก
ประกาศตัวแปรชื่อ mmmap ไว้ภายนอก function เพื่อให้ทุก function สามารถเรียกใช้ตัวแปร mmmap ได้

Listing 7 JavaScript function สำหรับสร้าง map object

var mmmap;

function initialize(){ 
    var mmMapDiv = document.getElementById("mmMapDiv"); 
    mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal");
}

4. สร้าง map object ขึ้นมาเมื่อเกิด event onload ของ body tag

top

กำหนดค่า attribute onload ของ body tag เท่ากับ initialize() เพื่อเรียกใช้ function นี้
เมื่อมีการโหลด web page เรียบร้อยแล้ว

Listing 8 กำหนด function ให้กับ attribute onload ของ body tag

<body onload="initialize()">

ต่อไปจะเป็นตัวอย่างที่รวมทุกอย่างเข้าด้วยกัน เพื่อแสดงแผนที่ MM Map ใน web page

Listing 9 html page ที่แสดงแผนที่ MM Map

 <html>
    <head>
        <title>create map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </script>
        <script type="text/javascript">

            var mmmap;

            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal");
            }

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

สร้าง Marker สถานที่

top

คุณสามารถสร้าง marker เพื่อระบุตำแหน่งสถานที่โดยการเขียนคำสั่งเข้าไป map object จะมี method createMarker สำหรับสร้าง marker ขึ้นในแผนที่ ดังนั้นก่อนที่จะใช้ method createMarker คุณต้องสร้างตัวแปร เพื่ออ้างอิง Map object ก่อน อ่านวิธีการสร้างแผนที่

Listing 10 คำสั่งในการสร้าง marker

var markerId = mmmap.createMarker(latitude, longitude, 
"locationName", "locationDetail");

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

Latitude (float type) คือ ค่าละติจูดของตำแหน่งที่ต้องการสร้าง marker
Longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่ต้องการสร้าง marker
locationName (string type) คือ ชื่อสถานที่
locationDetail (string type) คือ รายละเอียดของสถานที่

จาก Listing 10 ตัวแปร markerId สามารถกำหนดเป็นชื่ออื่นก็ได้
method createMarker คืนค่าเป็น id ของ marker มีชนิดข้อมูลเป็นจำนวนเต็ม

Listing 11 แสดง marker อนุสาวรีย์ชัยสมรภูมิในแผนที่

<html>
    <head>
        <title>create marker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </script>
        <script type="text/javascript">

            var mmmap;

            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv, 13.7689, 100.5380, 11, "normal");
                createMarker();
            }

            function createMarker(){
                var markerId = mmmap.createMarker(13.7654, 100.538,
                "อนุสาวรีย์ชัยสมรภูมิ", "ศูนย์กลางการเดินทางขนส่งในกรุงเทพมหานคร");
            }

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

ลบ marker สถานที่

top

map oject จะมี method deleteMarker สำหรับลบ marker ที่ได้สร้างไว้

Listing 12 คำสั่งในการลบ marker

mmmap.deleteMarker(markerId);

โดยที่ method deleteMarker รับ parameter 1 ตัว คือ markerId ซึ่งเป็นค่า id ของ marker ที่เราได้สร้างไว้ ค่า markerId นี้เป็นค่าที่ส่งคืนมาจาก method createMarker

นอกจากนี้เรายังสามารถแก้ไขข้อความที่แสดงใน pop up marker ได้ด้วย property detail

Listing 13 แก้ไขรายละเอียดของ pop up marker

document.getElementById("marker_" + markerId).detail = 
text || html code";

จาก Listing 13 ค่าที่กำหนดให้กับ property detail จะเป็นข้อความธรรมดา หรือเป็น html code ก็ได้

Listing 14 ลบ marker ออกจากแผนที่่

 <html>
    <head>
        <title>remove marker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;
            }
            #deleteDiv{
                margin-top:30px;
                cursor:pointer;
                text-decoration:underline;
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </script>
        <script type="text/javascript">

            var mmmap;
            var markerId;

            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv, 13.7689, 100.5380, 11, "normal");

                createMarker();

                deleteMarker();
            }

            function createMarker(){
                markerId = mmmap.createMarker(13.7654, 100.538,
                "อนุสาวรีย์ชัยสมรภูมิ", "ศูนย์กลางการเดินทางขนส่งในกรุงเทพมหานคร");
            }

            function deleteMarker(){
                document.getElementById("marker_" + markerId).detail += "<div id='deleteDiv'" +
                    "onclick='mmmap.deleteMarker(" + markerId + ")'>ลบ marker</div>";
            }

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

สร้าง user-defined div

top

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

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

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

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

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

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

<html>
    <head>
        <title>create user-defined div</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;       
            }
            /* class style สำหรับ user-defined div */
            .userDivStyle{
                border:2px solid #FF0000;
                background-color:#FFFFFF;             
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </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-defined div
                createDiv();
            }
            
            //function สำหรับสร้าง user-defined 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-defined div";
                //วาด div element บนแผนที่
                var userDivId = mmmap.drawCustomDiv(userDiv, 
                13.767734, 100.5351375, "user-defined div");
            }

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

นอกจากนี้คุณยังสามารถกำหนดระดับการ zoom ของแผนที่พร้อมกับการสร้าง user-defined div โดยการใช้ method drawCustomDivLevel

Listing 17 สร้าง user-defined div ที่มีการกำหนดระดับการ zoom ของแผนที่

 mmmap.drawCustomDivLevel(divElementObject, latitude, longitude, 
 titleText, minZoom, maxZoom);

โดยที่ method drawCustomDivLevel รับ parameter 6 ตัว ได้แก่

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

คุณยังสามารถกำหนดสร้าง pop up และข้อความใน pop up พร้อมกับการสร้าง user-defined div โดย pop up จะแสดงขึ้นมาเมื่อคลิกที่ user-defined div นั้น

Listing 18 สร้าง user-defined div ที่มี pop up

mmmap.drawCustomDivWithPopup(divElementObject, latitude , longitude, 
titleText , popUpText);

โดยที่ method drawCustomDivWithPopup รับ parameter 5 ตัว ได้แก่

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

Listing 19 สร้าง user-defined div ที่มีการกำหนดระดับการ zoom ของแผนที่และ pop up

mmmap.drawCustomDivLevelWithPopup(divElementObject, latitude, longitude, 
titleText , minZoom, maxZoom, popUpText);

โดยที่ method drawCustomDivLevelWithPopup รับ parameter 7 ตัว ได้แก่

divElementObject (object type) คือ div element object โดยอาจเป็น div element ที่เราได้สร้างขึ้นใหม่ด้วย method createElement ของ object document
latitude (float type) คือ ค่าละติจูดของตำแหน่งที่เราต้องการวาง div
longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่เราต้องการวาง div
titleText (string type) คือ ข้อความสำหรับอธิบาย div ข้อความนี้จะแสดงขึ้นมา เมื่อเราเลื่อน cursor ของ mouse ไปอยู่เหนือ div
minZoom (int type) คือ ระดับการ zoom ต่าสุด สามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 - 14
maxZoom (int type) คือ ระดับการ zoom สูงสุด สามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 - 14
popUpText (string type) คือ ข้อความที่ต้องการแสดงใน pop up

ลบ user-defined div

top

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

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

mmmap.removeCustomDivs(userDivId);

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

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

<html>
    <head>
        <title>remove user-defined div</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;
            }
            /* class style สำหรับ user-defined div */
            .userDivStyle{
                border:2px solid #FF0000;
                background-color:#FFFFFF;              
            }
        </style>
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea">
        </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-defined div
                createDiv();
            }
            
            //function สำหรับสร้าง user-defined 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-defined div";
                //ผูก function removeDiv เข้ากับ event onclick ของ div element
                userDiv.onclick = removeDiv;
                //วาด div element บนแผนที่
                userDivId = mmmap.drawCustomDiv(userDiv, 13.767734, 100.5351375, "user-defined div");
            }

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

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

นอกจากนี้ คุณยังสามารถลบ user-defined div ที่ได้สร้างไว้ทั้งหมดด้วย method clearCustomDivs

Listing 22 ลบ user-defined div ทั้งหมด

mmmap.clearCustomDivs();

ปรับขนาดของแผนที่

top

คุณสามารถปรับขนาดของแผนที่ด้วยการเขียนคำสั่งเพิ่มเติม map object มี method setSize สำหรับการปรับเพิ่มหรือลดขนาดของแผนที่ method setSize ใช้ร่วมกับ method rePaint เพื่อเป็นการ refresh แผนที่ใหม่ ทำให้แผนที่มีการแสดงขนาดได้ถูกต้อง

Listing 23 ปรับขนาดแผนที่

mmmap.setSize(mapWidth,mapHeight);
mmmap.rePaint();

โดย method setSize รับ parameter 2 ตัว ได้แก่

mapWidth คือ ขนาดความกว้างของแผนที่
mapHeight คือ ขนาดความสูงของแผนที่

ใน MM Map API ได้เตรียม function chkWinSize เพื่อเก็บข้อมูลขนาดของหน้าต่าง browser เราสามารถประยุกต์ใช้ function chkWinSize และ method setSize เพื่อทำให้แผนที่มีการปรับขนาดตามขนาดของหน้าต่าง browser ที่เปลี่ยนไป

Listing 24 แผนที่ปรับขนาดอัตโนมัติให้พอดีกับหน้าต่าง browser

<html>
    <head>
        <title>auto resize map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;
            }
        </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");

                //เรียกใช้ function adJustMapSize ให้ปรับขนาดของแผนที่
                //ให้พอดีกับหน้าต่าง browser
                adJustMapSize();

                //ผูก function adJustMapSize เข้ากับ event onresize
                //ของ window ซึ่งก็คือ browser นั่นเอง
                window.onresize = adJustMapSize;

            }

            //function สำหรับปรับขนาดของแผนที่ให้เต็มหน้าต่าง browser โดยอัตโนมัติ
            function adJustMapSize() {
                //เรียกใช้ function chkWinSize เพื่อเก็บขนาดของหน้าต่าง browser
                //โดยเก็บความกว้างไว้ในตัวแปร ww และความยาวไว้ในตัวแปร wh
                chkWinSize();

                //ใช้ function parstInt เพื่อแปลงข้อมูลเป็นจำนวนเต็ม
                var newwidth = parseInt(ww) - 5 - 5;
                var newheight = parseInt(wh) - 85 - 5;

                //เรียกใช้ method setSize และ rePaint เพื่อปรับขนาดของแผนที่
                mmmap.setSize(newwidth,newheight);
                mmmap.rePaint();
            }

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

เปลี่ยนจุดศูนย์กลางของแผนที่

top

MM Map API ได้จัดเตรียม method moveTo ของ map object ไว้สำหรับ เปลียนตำแหน่งจุดศูนย์กลางของแผนที่

Listing 25 รูปแบบคำสั่ง method moveTo

mmmap.moveTo(latitude, longitude);

โดยที่ method moveTo รับ parameter 2 ตัว ได้แก่

latitude (float type) คือ ค่าละติจูด
longitude (float type) คือ ค่าลองจิจูด

ปรับระดับการ zoom ของแผนที่ และการเรียกดูค่าระดับการ zoom ของแผนที่

top

map oject มี method setZoom ไว้สำหรับปรับระดับการ zoom ของแผนที่

Listing 26 ปรับระดับการ zoom ของแผนที่

mmmap.setZoom(zoomLevel);

โดยที่ method setZoom รับ parameter 1 ตัวคือ zoomLevel เป็นค่าระดับการ zoom ของแผนที่่ ซึ่งสามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 ถึง 14 ตัวเลขที่เพิ่มขึ้นหมายถึงระดับการ zoom ที่เพิ่มขึ้น

นอกจากนี้เรายังเรียกดูระดับการ zoom ของแผนที่ขณะนั้น โดยใช้ method getZoom

Listing 27 เรียกดูระดับการ zoom ของแผนที่ขณะนั้น

 var mapZoomLevel = mmmap.getZoom();

method getZoom ไม่มี parameter คืนค่าออกมาเป็นตัวเลขจำนวนเต็มที่เป็นระดับการ zoom ของแผนที่ขณะนั้น
จาก Listing 23 เราได้ประกาศตัวแปร mapZoomLevel เพื่อเก็บค่าระดับการ zoom ของแผนที่ขณะนั้น

เปลี่ยนรูปแบบการแสดงผลของแผนที่

top

map object มี method setMapMode สำหรับใช้ในการเปลียนรูปแบบการแสดงผลของแผนที่

Listing 28 เปลี่ยนรูปแบบการแสดงผลของแผนที่

 mmmap.setMapMode("mapMode");

โดยที่ method setMapMode รับ parameter 1 ตัว คือ mapMode เป็นข้อความเลือกรูปแบบการแสดงผลของแผนที่ ซึ่งมีสองค่าให้เลือกคือ

normal แสดงแผนที่แบบปกติ
hydro แสดงแผนที่แบบลายน้ำ

และเรายังสามารถเรียกดูได้ว่า ขณะนี้แผนที่มีรูปแบบการแสดงผลเป็นแบบใด

Listing 29 เรียกดูรูปแบบการแสดงผลของแผนที่

var currentMapMode = mmmap.getMapMode();

method getMapMode ไม่มีการรับ parameter คืนค่าออกมาเป็นข้อความบอกรูปแบบการแสดงผลของแผนที่ขณะนั้น

การสร้างแผนที่ด้วย MM Map API top

1. เพิ่ม MM Map API JavaScript library เข้าไปใน web page file top

2. สร้าง div element สำหรับวางแผนที่ top

3. สร้าง JavaScript function ไว้สำหรับสร้าง map object top

4. สร้าง map object ขึ้นมาเมื่อเกิด event onload ของ body tag top

สร้าง Marker สถานที่ top

ลบ marker สถานที่ top

สร้าง user-defined div top

ลบ user-defined div top

ปรับขนาดของแผนที่ top

เปลี่ยนจุดศูนย์กลางของแผนที่ top

ปรับระดับการ zoom ของแผนที่ และการเรียกดูค่าระดับการ zoom ของแผนที่ top

เปลี่ยนรูปแบบการแสดงผลของแผนที่ top