PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

Google Map API ดึงข้อมูลจากฐานข้อมูลที่มีการอัพเดทตลอด มาแสดงเป็น Marker และอัพเดท Realtime ได้อย่างไรครับ

Google Map API ดึงข้อมูลจากฐานข้อมูลที่มีการอัพเดทตลอด มาแสดงเป็น Marker และอัพเดท Realtime ได้อย่างไรครับ
ผมมีข้อมูล lat,lon อยู่ในฐานข้อมูลอยู่แล้ว และอยากจะดึงตำแหน่งสุดท้ายที่บันทึกในฐานข้อมูลมาแสดง
โดยในในหน้าเว็บจะมีการอัพเดทการดึงฐานข้อมูลตลอด

ตอนนี้ที่ทำได้คือดึงค่าจากฐานข้อมูลมาแสดงเป็น Marker บน Google Maps แล้วครับ
แต่พิกัดของ Marker ที่แสดงนั้นแสดงได้เพียงครั้งเดียวในตอนที่โหลดหน้าเว็บครั้งแรก
หากฐานข้อมูลมีการอัพเดทค่า lat lon เข้ามาใหม่ ตำแหน่ง Marker ในหน้าเว็บจะไม่อัพเดทตาม
เลยลองเขียน javascript เพื่อให้ autoload ปรากฎว่ามันโหลดทั้ง Map ใหม่หมดเลยทำให้เว็บช้า
ซึ่งจากกระทู้ 
ใช้ gps ระบุตำแหน่ง และอัพเดท ตำแหน่งอัตโนมัติ ใน google map 
http://www.ninenik.com/content.php?arti_id=563 via @ninenik

ผมได้เห็นว่ามีฟังก์ชันชื่อ watchposition เกี่ยวกับการเลื่อนตำแหน่งของ Marker ไม่ทราบว่าจะนำมาประยุกต์ใช้ได้หรือไม่ครับ
หรือหากมีตัวอย่างเกี่ยวกับวิธีการแบบนี้รบกวนขอเป็นแนวทางหน่อยนะครับ
 
ขอบคุณครับ

 


โดย:  Mysj IP: 202.12.74.xxx วันที่: 15-01-2015 เวลา: 20:16:24

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 3
ขอบคุณครับ


โดย:  Mysj IP: 202.12.74.xxx วันที่: 22-01-2015 เวลา: 15:53:20
 ความคิดเห็นที่ 2
ผมใช้โค๊ดตัวนี้ดึงตำแหน่งฐานข้อมูลครับ ไปเรียกไฟล์ phpajax_genxml.php
  function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(13.780815, 100.592806),
        zoom: 16,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b></b> <br/>";
          var icon = 'car.png';
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
      request.open('GET', url, true);
      request.send(null);

    }

    function doNothing() {}
พอแทรกไปแล้วมันก็แสดงค่าตำแหน่งจากฐานข้อมูลได้ แต่เมื่อฐานข้อมูลมีการเพิ่มตำแหน่งล่าสุดเข้ามามันจะไม่ตรวจสอบให้ครับว่าตำแหน่งเปลี่ยนแปลงไป Marker จะไม่เปลี่ยนไปตามฐานข้อมูลล่าสุด

โดย:  Mysj IP: 202.12.74.xxx วันที่: 16-01-2015 เวลา: 16:59:30
 ความคิดเห็นที่ 1

ตามบทความ http://www.ninenik.com/content.php?arti_id=563

แทรกโค้ดการดึงตำแหน่งต่างๆ มาแสดง ในส่วนของ 

 

            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){    
 
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน  
                               
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                var pos = new GGM.LatLng(myPosition_lat,myPosition_lon);     
                
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);
                                    
                var my_Point = my_Marker.getPosition();  // ดึงตำแหน่งตัว marker  มาเก็บในตัวแปร
                $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value  
                $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value   
                $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value           
                
                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน  
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                   
      

/////////////////////////////
แทรกโค้ดการดึงตำแหน่งจากฐานข้อมูล
/////////////////////////////

            },function() {    
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
            });    
          
    }else{    
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
    }     


กกก

โดย:  Ninenik IP: 124.122.81.xxx วันที่: 16-01-2015