Google map : ต.ย การบันทึกตำแหน่งที่ Mark (placeMarker) ในแผนที่ลงฐานข้อมูล

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 25061
Joined: 31/03/2014 10:02 am
Contact:

Google map : ต.ย การบันทึกตำแหน่งที่ Mark (placeMarker) ในแผนที่ลงฐานข้อมูล

Post by thatsawan »

จากตัวอย่าง

Code: Select all

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({

    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>
http://www.w3schools.com/googleAPI/tryi ... nfowindow2
คำอธิบาย : ตัวอย่างข้างบนจะเป็นการแสดงตำแหน่ง latitude เเละ longitudeบนเเผนที่ให้เราอยู่เเล้ว ถ้าต้องการจะ Insert เข้าเพิ่มคำสั่ง ดังนี้

ให้เราเพิ่มคำสั่งเพื่อส่งค่า POST ให้กับ ไฟล์ php

Code: Select all

          function placeMarker(location) {
                        var marker = new google.maps.Marker({
                                position: location,
                                map: map,
                        });
                        var infowindow = new google.maps.InfoWindow({
                                content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() // 
                        });
                        infowindow.open(map, marker);


// เก็บข้อมูลส่งไป post insert เข้าฐานข้อมูล
                        var location_lat = location.lat(); // เก็บค่า latitude  ที่คลิก
                        var location_lon = location.lng(); // เก็บ  longitude ที่คลิก
                        // สรัาง LatLng ตำแหน่ง สำหรับ google map
                        var pos = new google.maps.LatLng(location.lat(), location.lng());
                        $.post("add_location.php", {// ไฟล์ php รับค่าจาก post ไป insert
                                location_lat: location_lat, // ส่งค่าที่จะ insert
                                location_lon: location_lon  // ส่งค่าที่จะ insert
                        }, function () {
                                map.panTo(pos); // เลื่อนแผนที่ไปยังตำแหน่งปัจจุบันที่จุด
                                map.setCenter(pos); // เลื่อนจุดกลางของเเผนที่ ตำแหน่งปัจจุบัน                                    
                        });
                }
Selection_245.png
Selection_245.png (228.33 KiB) Viewed 1103 times

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests