แสดงพิกัด จาก xml ไฟล์ ใน google map ตอนที่ 4
เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdeeพิกัด google map xml
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ พิกัด google map xml
ดูแล้ว 11,328 ครั้ง
ไปที่
Copy
เมื่อได้ xml ไฟล์ ที่มีข้อมูล เกี่ยวกับ พิกัดของผู้ใช้แต่ละคนแล้ว
ตามเนื้อหาในตอนที่ 3
สร้าง xml รายการ พิกัด และตำแหน่ง จากฐานข้อมูล ตอนที่ 3
//www.ninenik.com/content.php?arti_id=481 via @ninenik
ต่อไปจะเป็นการนำ xml ไฟล์ที่ได้ มาเรียกใช้งาน และแสดงบน google map
โดยทำเพิ่มเติมต่อจากโค้ดใน ตอนที่ 2
บันทึกตำแหน่งปัจจุบัน ใน google map ลงฐานข้อมูล ตอนที่ 2
//www.ninenik.com/content.php?arti_id=480 via @ninenik
ตัวอย่างผลลัพธ์
ไฟล์ แผนที่ ตัวอย่างกำหนดชื่อเป็น my_friend_location.php
คำอธิบายแสดงในโค้ด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Google Map API 3 - Friend 01</title> <style type="text/css"> html { height: 100% } body { height:100%; margin:0;padding:0; font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana; font-size:12px; } /* css กำหนดความกว้าง ความสูงของแผนที่ */ #map_canvas { width:650px; height:500px; margin:auto; margin-top:50px; } </style> </head> <body> <div id="map_canvas"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น function initialize() { // ฟังก์ชันแสดงแผนที่ GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM // กำหนดจุดเริ่มต้นของแผนที่ var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800); // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 12, // กำหนดขนาดการ zoom center: my_Latlng , // กำหนดจุดกึ่งกลาง mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่ mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ position:GGM.ControlPosition.TOP, // จัดตำแหน่ง style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style } }; map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude ปัจจุบัน var myPosition_lon=position.coords.longitude; // เก็บค่าตำแหน่ง longitude ปัจจุบัน // สรัาง LatLng ตำแหน่ง สำหรับ google map var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude); $.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล myPosition_lat:myPosition_lat, // ส่งค่า latitude myPosition_lon:myPosition_lon // ส่งค่า longitude },function(){ map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน }); },function() { // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน }); }else{ // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง } // ใช้ ajax ดึงค่าจาก xml มาใช้งาน $.ajax({ url:"friend_list.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml dataType: "xml", success:function(xml){ $(xml).find("marker").each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerDate=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var narkerIcons=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLatLng=new GGM.LatLng(markerLat,markerLng); var image1 = new GGM.MarkerImage(narkerIcons, // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0 new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป) ); var my_Marker = new GGM.Marker({ // สร้างตัว marker position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง icon: image1, // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // console.log($(this).find("id").text()); }); } }); } $(function(){ // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api // v=3.2&sensor=false&language=th&callback=initialize // v เวอร์ชัน่ 3.2 // sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false // language ภาษา th ,en เป็นต้น // callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize $("<script/>", { "type": "text/javascript", src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize" }).appendTo("body"); }); </script> </body> </html>
ในเนื้อหาตอนที่ 5 ตอนสุดท้าย จะเป็นการเพิ่ม infowindow แสดง
ข้อมูล เมื่อคลิก แต่ละ icon ของรายการ ในแผนที่
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
อ่านต่อที่บทความ
-
13 Mar2014แสดง infowindow เนื้อหา เมื่อคลิก icons ใน google map ตอนที่ 5 อ่าน 12,247
จากเนื้อหาในตอนที่ 4 เมื่อเราสามารถแสดง icons ระบุตำแหน่ง ของเพื่อน
เนื้อหาที่เกี่ยวข้อง
-
09 Mar2014แสดงตำแหน่งเพื่อนๆ จากฐานข้อมูล ใน google map ตอนที่ 1 อ่าน 14,555
เนื้อหานี้ จะทำเป็นตอนๆ ต่อเนื่อง เพื่อศึกษา และประยุกต์การใช้งาน google
-
10 Mar2014บันทึกตำแหน่งปัจจุบัน ใน google map ลงฐานข้อมูล ตอนที่ 2 อ่าน 24,250
ตอนที่ 2 สำหรับแสดงตำแหน่งเพื่อนๆ ใน google map จะเป็นการ บันทึกตำแหน่งปั
-
11 Mar2014สร้าง xml รายการ พิกัด และตำแหน่ง จากฐานข้อมูล ตอนที่ 3 อ่าน 10,611
เนื้อหาส่วนที่ 3 จะเป็นแบบสั้นๆ เป็นวิธีการ ต่อเนื่องจาก ตอนที่ 1 และ ตอนที่
-
กำลังอ่านเนื้อหานี้อยู่12 Mar2014แสดงพิกัด จาก xml ไฟล์ ใน google map ตอนที่ 4 อ่าน 11,328
เมื่อได้ xml ไฟล์ ที่มีข้อมูล เกี่ยวกับ พิกัดของผู้ใช้แต่ละคนแล้ว ตามเนื้
-
13 Mar2014แสดง infowindow เนื้อหา เมื่อคลิก icons ใน google map ตอนที่ 5 อ่าน 12,247
จากเนื้อหาในตอนที่ 4 เมื่อเราสามารถแสดง icons ระบุตำแหน่ง ของเพื่อน
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน