บทนำ
Google Meshup Editor (GME) เป็นหนึ่งในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ที่มีประโยชน์และรอมายาวนานที่สุด GME ช่วยให้นักพัฒนาซอฟต์แวร์สร้างและแก้ไขคอมโพเนนต์แบบไดนามิกในหน้าเว็บได้ เช่น แผนที่ ตาราง รายการ และองค์ประกอบอื่นๆ โดยอิงตามการเชื่อมต่อกับข้อมูลภายนอก จากนั้นคุณรวมองค์ประกอบเหล่านี้ไว้ในหน้าเว็บและบล็อกโดยใช้ iframe ได้บทแนะนํานี้จะแสดงวิธีใส่ไฟล์ KML ลงในแผนที่ ที่สร้างจาก GME
การแสดงผลครั้งแรกของฉันใน Google Mashup Editor
- และมีฟังก์ชันที่ดูเรียบง่ายที่สุด โดยมีอินเทอร์เฟซที่สะอาดตาและโดดเด่น เช่นเดียวกับผลิตภัณฑ์ส่วนใหญ่ของ Google
- มีดัชนีโปรเจ็กต์ที่ใช้งานสะดวกพร้อมคอลเล็กชันตัวอย่างโค้ดที่เพิ่มขึ้นอย่างต่อเนื่อง รวมถึงโค้ดของผู้เขียนด้วย
- ซึ่งจะช่วยให้คุณจัดเก็บทรัพยากรเพิ่มเติมลงในโปรเจ็กต์ได้อย่างง่ายดาย (เช่น ไฟล์ภาพ)
- เครื่องมือนี้ใช้โปรแกรมแก้ไขข้อบกพร่อง XML ที่ใช้งานง่าย
- แอปพลิเคชันนี้มีแอปพลิเคชันตัวอย่างที่ใช้งานง่ายจํานวนมาก
GME สําหรับนักพัฒนาซอฟต์แวร์ KML
ก่อนที่จะมีอินเทอร์เน็ต ข้อมูลเชิงพื้นที่ ค่อนข้างแชร์ได้ยากนัก อย่างไรก็ตาม ด้วยการพัฒนาอินเทอร์เน็ต แอปพลิเคชันการแมปกลายเป็นวิธีมาตรฐานในการแชร์ข้อมูลระบบข้อมูลทางภูมิศาสตร์ (GIS) กับคนทั่วโลกได้ง่ายๆ KML กลายเป็นมาตรฐานสําหรับการนําเสนอและการแลกเปลี่ยนข้อมูล GIS เนื่องจากมีขนาดกะทัดรัด สามารถพัฒนาได้ง่าย และรองรับโดยแอปพลิเคชันยอดนิยม เช่น Google Earth และ Google Maps
เมื่อเร็วๆ นี้ กระบวนการสร้างและแก้ไขหน้าเว็บที่ใช้ JavaScript เป็นปัญหาใหญ่สําหรับนักพัฒนา KML ขั้นตอนนี้มีขั้นตอนเพิ่มเติมจํานวนมากในการสร้างแมชอัปและแก้ไขข้อบกพร่อง GME ทําให้เราสร้างแมชอัปที่ใช้ KML ได้อย่างรวดเร็วจากคอมโพเนนต์พื้นฐานเพียงไม่กี่รายการ กระบวนการสร้างไม่จําเป็นต้องมีความรู้พิเศษเกี่ยวกับ HTML หรือ JavaScript โปรเจ็กต์ GME ตัวอย่างก็เพียงพอที่จะเริ่มต้น
ในตัวอย่างต่อไปนี้ ผมจะใช้ไฟล์ KML ที่ชี้ไปยังคอลเล็กชันรูปภาพที่ถ่ายระหว่างเที่ยวบิน Pict Earth USA
นี่คือภาพรวมของการแมปแผนที่ Pict Earth:
ขั้นตอนการผสานรวมไฟล์ KML ลงในโปรเจ็กต์ GME โดยใช้ Google Maps API มีดังนี้
ขั้นตอนที่ 1: เลือกไฟล์ KML
ขั้นตอนที่ 2: สร้างโปรเจ็กต์ GME ใหม่
ขั้นตอนที่ 3: สร้างฟังก์ชันเพื่อเพิ่ม KML
ขั้นตอนที่ 4: เพิ่มแผนที่
ขั้นตอนที่ 5: ทดสอบแมชอัป
ขั้นตอนที่ 1:
1
ขั้นตอนที่ 1: เลือกไฟล์ KML
เลือกไฟล์ KML ที่คุณต้องการเพิ่มลงในแผนที่ ไม่ว่าจะเป็นฟีเจอร์ใดก็ตาม ที่รองรับใน Google Maps และต้องโฮสต์บนเซิร์ฟเวอร์ สาธารณะ
ขั้นตอนที่ 2: สร้างโปรเจ็กต์ GME ใหม่
สร้างโปรเจ็กต์ GME เปล่าใหม่
โปรเจ็กต์ GME เปล่ามีลักษณะเช่นนี้
เพิ่มชื่อสําหรับฟังก์ชัน
<gm:page title="ภารกิจ Earth" ตรวจสอบสิทธิ์="เท็จ" onload="chromebookPE()"></gm:page>
ขั้นตอนที่ 3: สร้างฟังก์ชันเพื่อเพิ่ม KML
สร้างฟังก์ชัน JavaScript ที่มีเส้นทางไปยังไฟล์ KML เพื่อเพิ่มลงในแผนที่
<script>
function kmlPE()
{
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!--Place KML on Map -->
myMap.addOverlay(geoXml);
<!--Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
ขั้นตอนที่ 4: เพิ่มแผนที่
เพิ่มแผนที่และพารามิเตอร์
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
ขั้นตอนที่ 5: ทดสอบแมชอัป
กดปุ่มทดสอบ (F4)
รูปภาพนี้เป็นภาพแมชอัปของ Pict Earth ที่ทดสอบในแซนด์บ็อกซ์
ตอนนี้เรายืนยันข้อความของแอปพลิเคชันและดูผลการค้นหาแรกได้แล้ว เราสามารถเพิ่มชื่อ และลิงก์ และทดสอบอีกครั้ง
ขั้นตอนที่ 6: เผยแพร่แมชอัป
ตั้งชื่อโปรเจ็กต์แล้วเผยแพร่ การดําเนินการนี้จะให้ลิงก์ถาวรไปยังแมชอัป ซึ่งคุณจะใช้ผสานรวมในหน้าเว็บได้ ตัวอย่างของฉันคือลิงก์ไปยังหน้าแรกของโครงการ GME และยังดูซอร์สโค้ดของโปรเจ็กต์ได้อีกด้วย
ขั้นตอนที่ 7: เพิ่มแมชอัปในหน้าเว็บ
เพิ่มแมชอัปลงในหน้าเว็บโดยใช้ iframe เช่น หากต้องการแทรกโปรเจ็กต์ตัวอย่าง ให้เพิ่มโค้ดต่อไปนี้
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
ต่อไปนี้คือตัวอย่างของแมชชีนในหน้าเว็บและบล็อก
คุณยังเพิ่มโค้ด Google Analytics ลงในโปรเจ็กต์ได้ด้วย ซึ่งจะช่วยให้ติดตามสถิติเกี่ยวกับผู้ที่ดูหน้าเว็บของคุณได้ นี่คือสคริปต์ง่ายๆ ที่จะเพิ่ม
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
ขั้นตอนที่ 8: ใส่ไว้ในแกลเลอรี GME
เผยแพร่แมชชีนไปยังแกลเลอรี GME Mashup ซึ่งจะทําให้ ผู้ใช้รายอื่นดูแมชอัปของคุณได้
สำหรับข้อมูลเพิ่มเติม
ดูคู่มือเริ่มต้นใช้งาน Google Ads Editor ที่แสดงรายละเอียดขั้นตอนการสร้างแมชอัป นอกจากนี้ โปรดดูรายการแท็กสําหรับคําอธิบายโดยย่อของแท็กแท็ก gm ทั้งหมดที่มีตัวอย่าง
รหัส:
โค้ดทั้งหมดสําหรับการใช้ KMLt Earth KML ใน GME
<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>
<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
<script>
function kmlPE(){
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!-- Place KML on Map -->
myMap.addOverlay(geoXml);
<!-- Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
</gm:page>
ขั้นตอนถัดไปคือ
เมื่อเผยแพร่แมชอัปแล้ว คุณสามารถใช้ไฟล์ KML ในนั้นเป็นพารามิเตอร์เพื่อใส่ในแอปพลิเคชันอื่น หรือโหลดเป็นแผนที่โดยตรงก็ได้ สําหรับหน้านี้
http://param.googlemashups.com เป็นแมชอัปของ GME คุณสามารถอ้างอิงไฟล์ KML ไปยังแมชอัปได้โดยตรงโดยการเพิ่ม KML= เป็นพารามิเตอร์ใน URL ดังนี้ http://param.googlemashups.com/? KML=http://map Gadgets.googlepages.com/cta.KMLนอกจากนี้ คุณยังสร้าง Gadget จากโปรเจ็กต์ได้อีกด้วย เมื่อส่งแล้ว ให้ไปที่เมนูไฟล์แล้วคลิก "ส่งแกดเจ็ต" และทําตามคําแนะนํา วิธีนี้จะช่วยให้คุณเพิ่มแอปพลิเคชันลงในหน้าแรกของ Google ที่ปรับเปลี่ยนในแบบของคุณ ในหน้าเว็บอื่นๆ และแชร์กับคนอื่นได้