API

สอนการใช้ Map API ร่วมกับ Vue js สร้างแผนที่ออนไลน์บน Web Application

Map API Vue JS

Vue.js เป็น Framework ที่ใช้อย่างแพร่หลายในปัจจุบัน เนื่องจากที่ขึ้นโปรเจคง่าย และสามารถต่อยอดจาก JavaScript ที่เราคุ้นเคยกัน บทความนี้เราเลยจะมาอธิบายวิธีการใช้ Vue ร่วมกับ Map API โดยพื้นฐานกันครับ

Longdo Map API กับ Vue js

Longdo Map เป็นแผนที่ออนไลน์คนไทย ที่ให้บริการแก่นักพัฒนาในการนำแผนที่ไปใช้ในเว็บแอปพลิเคชันมานาน จึงได้ปล่อย Longdo Map Vue component ออกมาให้ใช้กัน

ซึ่งเว็บ Tutorial ของ Longdo Map API เอง ก็ใช้ Vue เช่นกันนะ : ) ดังภาพด้านล่าง

คู่มือพัฒนาระบบ map.longdo.com/docs

วันนี้เลยอยากแนะนำวิธีนำไปใช้เบื้องต้นกันครับ​ มีหัวข้อเรื่อง ดังนี้

  1. Installation
  2. Usage
  3. Example
  4. Components

สามารถดูเพิ่มเติมที่: Longdo Map Vue – Github


1. การติดตั้ง (installation)

หลังที่เราได้ติดตั้ง vue เรียบร้อยแล้ว ให้ใช้คำสั่ง npm ด้านล่างเพื่อติดตั้ง

npm i longdo-map-vue

2. การเรียกใช้งาน (usage)

อันดับแรก นักพัฒนาต้องมี KEY API สำหรับเรียก API ก่อน สมัครฟรีได้ที่ Longdo Map API key.

เมื่อได้คีย์มาแล้ว ท่านสามารถเรียกใช้ Map component บน Vue project ได้
มีด้วยกัน 2 แบบ

แบบที่ 1 => global component ที่ทำให้ใช้แผนที่ได้กับทุกที่ ในโปรเจคของท่าน (แนะนำ)

ใส่โค้ดด้านล่างนี้ ในไฟล์ main.js หรือไฟล์ที่เกี่ยวข้อง:

import Vue from 'vue' 
import LongdoMap from 'longdo-map-vue' 

Vue.use(LongdoMap, {     
       load: {         
            apiKey: 'YOUR_LONGDO_MAP_API_KEY'     
       } 
})

หลังจากนั้น ท่านสามารถใช้ <longdo-map/> ใน component template ได้

<template>     
   <longdo-map/> 
</template>

ตัวอย่างการสร้างผลด้วย Vue.js

Map API Vue js

แบบที่ 2 => local component

ยกตัวอย่างเช่น ใน component file ชื่อ Foo.vue

<template>     
   <longdo-map/> 
</template>
import { LongdoMap } from 'longdo-map-vue'
LongdoMap.init('YOUR_LONGDO_MAP_API_KEY')

export default {
    name: 'Foo',
    components: {    
       LongdoMap   
    }
}

ท่านสามารถที่จะนำเข้า component อื่นๆ เพิ่มเติมตามต้องการได้อีก เช่น

import { LongdoMap, LongdoMapMarker } from 'longdo-map-vue'

3. ลองมาดูวิธีใช้กัน (Example)

3.1 เพิ่มรูปทรงหลายเหลี่ยม (Polygon) ไปยัง Longdo Map:

<template>     
    <longdo-map>         
       <longdo-map-polygon             
           :location="locationList"             
           :lineWidth="2"             
           :lineColor="'rgba(0, 0, 0, 1)'"
           :fillColor="'rgba(255, 0, 0, 0.4)'"/>     
    </longdo-map>
</template>
export default {
     data() {
         return {
             locationList: [
                 { lon: 99, lat: 14 },
                 { lon: 100, lat: 13 },
                 { lon: 102, lat: 13 },
                 { lon: 103, lat: 14 }
             ]
         }
     }
 }

ผลลัพธ์ที่ได้

Overlay Map API JS

3.2 เพิ่มหมุดจำนวนมากบนแผนที่

<template>     
    <longdo-map :zoom="10" :lastView="false">         
        <longdo-map-marker             
            v-for="(item, i) in markers"             
            :key="i"             
            :location="item.location"
            :title="item.title"             
            :detail="item.detail"     
        />     
    </longdo-map> 
</template>
export default {
  data() {
    return {
      markers: [
        {
          location: { lon: 100.58, lat: 13.761 },
          title: "Vue Marker",
          detail: "This is a detail"
        }
      ]
    };
  }
};

ผลลัพธ์ที่ได้

Marker Map API Vue js

4. Components

ยังมีการสร้าง Overlay หลายๆ แบบ ที่รองรับการทำงานแบบข้างต้น เช่น

*** และยังมีคำสั่งบางอย่างที่ต้องอ้างอิงจาก JavaScript API เดิมอยู่ โดยจะมีวิธีใช้ดังตัวอย่างด้านล่างนี้ เช่น การดักจับเหตุการณ์บนแผนที่ (Event)

Event Map API ในรูปแบบ JavaScript API:

map.Event.bind('location', function() {
  var location = map.location(); // Cross hair location
  console.log(location);
});

เปลี่ยนตัวอย่าง มาเป็นแบบ Vue Component

<longdo-map 
   @load="test" 
   :zoom="10" 
   :lastViw="false">
</longdo-map>
methods:{
     test(map) {
         map.Event.bind('', function(){
             //do somethings
        }) 
     }
 }

ตัวอย่างการใช้แบบของจริง

Event Map API with Vue JS

ศึกษาเพิ่มเติม: Longdo Map JavaScript API documentation


สรุป

นักพัฒนาสามารถเลือกได้ว่า เราจะสร้าง Object แผนที่ครั้งเดียว แล้วนำไปใช้ในทุกๆ Components หรือสร้างแบบแยกหน้ากันไปเลย ขึ้นอยู่กับโจทย์ของระบบแต่ละท่านนั่นเอง

สะดวกมากๆ ครับ อยากให้ “ลองดู” : )