เรียกใช้งาน Map ด้วย Titanium Mobile

ในบทความนี้จะกล่าวถึงสิ่งที่ติดอยู่กับ Android และ iPhone สิ่งนั้นก็คือ Map นั่นเองครับ



เรามาเริ่มกันเลยดีกว่าครับ วิธีการเรียกใช้งาน Map ก็จะสามารถเรียกได้ด้วยคำสั่ง
Titanium.Map.createView

โดยที่จะมี Property ที่เราจะได้ใช้บ่อย ๆ ซึ่งได้แก่
  • mapType เอาไว้ระบุประเภท Map ที่เราต้องการแสดงโดยแบ่งเป็นประเภทได้ดังนี้
    • Titanium.Map.HYBRID_TYPE
    • Titanium.Map.SATELLITE_TYPE
    • Titanium.Map.STANDARD_TYPE
  • region เอาไว้ระบุขอบเขตการแสดง Map ซึ่งเราสามารถกำหนดจุดกึ่งกลางของ Map ได้ และรัศมีการแสดงได้ โดยมี Property ย่อยดังนี้
    • latitude กำหนดค่า latitude
    • longitude กำหนดค่า longtitude
    • latitudeDelta กำหนดรัศมีจากตำแหน่ง lattitude
    • longitudeDelta กำหนดรัศมีจากตำแหน่ง lontitude
  • regionFit กำหนดว่าให้แสดงเฉพาะในขอบเขตที่ระบุเอาไว้หรือไม่
  • userLocation กำหนดว่าให้แสดง ตำแหน่งปัจจุบันของ User หรือไม่

โดยเราสามารถสร้าง Map View ดังนี้ครับ
var mapview = Ti.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region:{latitude:13.726316, longitude:100.493122, latitudeDelta:0.005, longitudeDelta:0.005},
regionFit:true,
width:Titanium.Platform.displayCaps.platformWidth,
zindex:0,
userLocation:false,
touchEnabled:true
});


หลังจากนั้นก็นำไปใส่ใน window แล้วก็ สั่ง open ตามปกติ ก็จะได้ โปรแกรมแสดงแผนที่ดังรูป


เมื่อเราได้แผนที่แล้วหากเราต้องการระบุตำแหน่งต่าง ๆ บนแผนที่ (Pin) ก็สามารถทำได้ด้วยคำสั่ง
Titanium.Map.createAnnotation

เราก็สามารถกำหนด Property ต่าง ๆ ให้กับ Annotation ได้ดังนี้
  • latitude กำหนดค่า latitude
  • longitude กำหนดค่า longtitude
  • pincolor ระบุสีให้กับ Pin
    • Titanium.Map.ANNOTATION_RED
    • Titanium.Map.ANNOTATION_GREEN
    • Titanium.Map.ANNOTATION_PURPLE
  • pinImage ระบุรูปให้กับ pin
  • title ระบุชื่อของ ตำแหน่ง

โดยเราสามารถกำหนดค่าได้ตามตัวอย่าง
var anotation = Ti.Map.createAnnotation({
latitude:13.726316,
longitude:100.493122,
pincolor:Titanium.Map.ANNOTATION_RED,
title : 'วงเวียนใหญ่'
});


จากนั้นก็ทำการ เพิ่ม Annotation ให้กับ Map และทำการเลือก Pin ด้วยคำสั่ง
mapview.addAnnotation(anotation);
mapview.selectAnnotation(anotation);


ก็จะได้ ตามภาพ


สำหรับบทความนี้ก็จะจบเพียงเท่านี้นะครับ ยังไงก็ติดตามกันต่อนะครับว่าในบทความหน้านั้นจะกล่าวถึงเรื่องอะไร หากมีคำแนะนำหรือข้อติชมก็สามารถ Comment ได้นะครับ แล้วก็อย่าลืม  กด Like Fanpage เพื่อติดตามข่าวสารต่าง ๆ ด้วยนะครับ

0 ความคิดเห็น:

โพสต์ความคิดเห็น