Category Archives: เทคโนโลยี GIS

Jquery Moblie ดึงพิกัด GPS

gps

ไฟล์ gps.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name=viewport content="user-scalable=no,width=device-width" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>
        <div data-role=page id=home>
            <div data-role=header data-theme="b"><h1>พิกัด GPS</h1></div>

            <div data-role=content>
                <span> สถานะ : </span> <span id=state></span> <br />
                <span> เวลา : </span> <span id=time></span> <br />
                <span> Latitude : </span> <span id=lat></span> <br />
                <span> Longitude : </span> <span id=lng></span> <br />
            </div>
            <div align="center">
                <input data-theme="c" type="button" name="btn_start" value="Start" id="btn_start" data-inline="true" data-icon="check">
                <input data-theme="e" type="button" name="btn_stop" value="Stop" id="btn_stop" data-inline="true" data-icon="delete">
            </div>
            <div align="center">
                <div id="out_put" style="width:99%; height:300px; overflow:scroll; border:1px solid #000;"></div>
            </div>
            <br>
             <div data-role=footer data-theme="b" data-position="fixed"><h4>By Android4Health</h4></div>
        </div>
    </body>
</html>

<script>
    (function($) {
        var runGPS = 0;
        $('#btn_start').click(function() {
            $("#state").text('Running');
            runGPS = 1;
        });
        $('#btn_stop').click(function() {
            $("#state").text('Paused');
            runGPS = 0;
        });
        var timer = setInterval(function() {
            if (runGPS == 1) {
                navigator.geolocation.getCurrentPosition(function(pos)                {
                    date = new Date();
                    $("#time").text(date);
                    var lat = pos.coords.latitude;
                    var lng = pos.coords.longitude;
                    $("#lat").text(lat);
                    $("#lng").text(lng);
                    var t = date + " lat:" + lat + "lng:" + lng + "<br>";
                    $("#out_put").append(t);
                });
            }
        }, 1000);
    })(jQuery);
</script>

Google Maps using Jquery plugin Gmap3:การทำ context menu

Live Demo

ไฟล์ contextmenu.html

<html>    
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>        
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=th-TH" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.js"></script>
    
    <link rel="stylesheet" type="text/css" href="menu/gmap3-menu.css" />
    <script type="text/javascript" src="menu/gmap3-menu.js"></script> 
    <style>
      #container{
        position:relative;
        height:700px;
      }
      #directions{
        position:absolute;
        width: 23%;
        right:1%;
        height: 690px;
        overflow:auto;
      }
      #googleMap{
        border: 1px dashed #C0C0C0;
        width: 75%;
        height: 700px;
      }
    </style>
    
    <script type="text/javascript">
      $(function(){
      
        var $map = $("#googleMap"), 
          menu = new Gmap3Menu($map),
            
          current,  // current click event (used to save as start / end position)
          m1,       // marker "from"
          m2;       // marker "to"
        
        // update marker
        function updateMarker(marker, isM1){
          if (isM1){
            m1 = marker;
          } else {
            m2 = marker;
          }
          updateDirections();
        }
        
        // add marker and manage which one it is (A, B)
        function addMarker(isM1){
          // clear previous marker if set
          var clear = {name:"marker"};
          if (isM1 && m1) {
            clear.tag = "from";
            $map.gmap3({clear:clear});
          } else if (!isM1 && m2){
            clear.tag = "to";
            $map.gmap3({clear:clear});
          }
          // add marker and store it
          $map.gmap3({
            marker:{
              latLng:current.latLng,
              options:{
                draggable:true,
                icon:new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green" + (isM1 ? "A" : "B") + ".png")
              },
              tag: (isM1 ? "from" : "to"),
              events: {
                dragend: function(marker){
                  updateMarker(marker, isM1);
                }
              },
              callback: function(marker){
                updateMarker(marker, isM1);
              }
            }
          });
        }
        
        // function called to update direction is m1 and m2 are set
        function updateDirections(){
          if (!(m1 && m2)){
            return;
          }
          $map.gmap3({
            getroute:{
              options:{
                origin:m1.getPosition(),
                destination:m2.getPosition(),
                travelMode: google.maps.DirectionsTravelMode.DRIVING
              },
              callback: function(results){
                if (!results) return;
                $map.gmap3({get:"directionrenderer"}).setDirections(results);
              }
            }
          });
        }  
       
        
        // MENU : ITEM 1
        menu.add("เส้นทางจากที่นี่", "itemA", 
          function(){
            menu.close();
            addMarker(true);
          })

		   // MENU : ITEM 2
        menu.add("เส้นทางสู่ที่นี่", "itemB  separator", 
          function(){
            menu.close();
            addMarker(false);
          });
        
        // MENU : ITEM 3
        menu.add("Zoom in", "zoomIn", 
          function(){
            var map = $map.gmap3("get");
            map.setZoom(map.getZoom() + 1);
            menu.close();
          });
        
        // MENU : ITEM 4
        menu.add("Zoom out", "zoomOut",
          function(){
            var map = $map.gmap3("get");
            map.setZoom(map.getZoom() - 1);
            menu.close();
          });
        
        // MENU : ITEM 5
        menu.add("Center here", "centerHere", 
          function(){
              $map.gmap3("get").setCenter(current.latLng);
              menu.close();
          });
        
        // INITIALIZE GOOGLE MAP
        $map.gmap3({
          map:{
            options:{
              center:[16.0061640881589, 100.3459243774414062],
              zoom: 6
            },
            events:{
              rightclick:function(map, event){
                current = event;
                menu.open(current);
              },
              click: function(){
                menu.close();
              },
              dragstart: function(){
                menu.close();
              },
              zoom_changed: function(){
                menu.close();
              }
            }
          },
          // add direction renderer to configure options (else, automatically created with default options)
          directionsrenderer:{
            divId:"directions",
            options:{
              preserveViewport: true,
              markerOptions:{
                visible: false
              }
            }
          }
        });
      });
    </script>  
  </head>
    
  <body>
    <div id="container">
      <div id="directions"></div>
      <div id="googleMap"></div>
    </div>
  </body>
</html>

ดาวน์โหลด : mapcontextmenu.zip

referrence : http://gmap3.net/

Google Map API: ใส่ StreetView เข้าไปใน infowindow

Live Demo

<!-- gmap5.php -->
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Gmap API v3: Info Window with StreetView : Android4Health</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script   src="http://maps.google.com/maps/api/js?sensor=false&amp;language=th-TH" ></script> 

<script type="text/javascript"> 
function initialize() {
var myLatlng = new google.maps.LatLng(13.990041,100.398148);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div id="content" style="width:250px;height:250px;"></div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click Me',
draggable: true
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});

var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
enableCloseButton: false,
addressControl: false,
linksControl: false
});
pano.bindTo("position", marker);
pano.setVisible(true);
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});

}

</script> 

</head> 
<body onload="initialize()"> 
<div id="map_canvas"></div> 
</body> 
</html>

Google Map Api V3 การทำ Route Direction แบบ Animation

Live Demo : http://203.157.10.11/gis/gmap3.php

ตัวอย่างนี้ แนะนำวิธีการทำ Direction บน Google Map API V3 ในรูปแบบ Annimation ครับ
เมื่อกด Start หมุดสีแดงจะเคลื่อนที่จากจุดเริ่มต้น ไป ยังจุดปลายทาง โดยเคลื่อนที่ไปตามเส้นทางครับ

ไฟล์ gmap3.php

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=tis-620"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>


<style>
html{height:100%;}
body{height:100%;margin:0px;font-family: Helvetica,Arial;}
</style>

 <script   src="http://maps.google.com/maps/api/js?sensor=false&amp;language=th-TH" ></script> 
<script src="v3_epoly.js"></script>
<script >
  
  var map;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];
  var position;
  var marker = null;
  var polyline = null;
  var poly2 = null;
  var speed = 0.000005, wait = 1;
  var infowindow = null;
  
    var myPano;   
    var panoClient;
    var nextPanoId;
  var timerHandle = null;

function createMarker(latlng, label, html) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        marker.myname = label;
        // gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    return marker;
}


function initialize() {
  infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(150,50)
    });
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService();
    
    // Create a map and center it on Manhattan.
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    address = 'กรุงเทพมหานคร'
    geocoder = new google.maps.Geocoder();
	geocoder.geocode( { 'address': address}, function(results, status) {
       map.setCenter(results[0].geometry.location);
	});
    
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    
    // Instantiate an info window to hold step text.
    stepDisplay = new google.maps.InfoWindow();

    polyline = new google.maps.Polyline({
	path: [],
	strokeColor: '#FF0000',
	strokeWeight: 3
    });
    poly2 = new google.maps.Polyline({
	path: [],
	strokeColor: '#FF0000',
	strokeWeight: 3
    });
  }

  
  
	var steps = []

	function calcRoute(){

if (timerHandle) { clearTimeout(timerHandle); }
if (marker) { marker.setMap(null);}
polyline.setMap(null);
poly2.setMap(null);
directionsDisplay.setMap(null);
    polyline = new google.maps.Polyline({
	path: [],
	strokeColor: '#FF0000',
	strokeWeight: 3
    });
    poly2 = new google.maps.Polyline({
	path: [],
	strokeColor: '#FF0000',
	strokeWeight: 3
    });
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map
    }
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

	    var start = document.getElementById("start").value;
	    var end = document.getElementById("end").value;
		var travelMode = google.maps.DirectionsTravelMode.DRIVING

	    var request = {
	        origin: start,
	        destination: end,
	        travelMode: travelMode
	    };

		// Route the directions and pass the response to a
		// function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK){
	directionsDisplay.setDirections(response);

        var bounds = new google.maps.LatLngBounds();
        var route = response.routes[0];
        startLocation = new Object();
        endLocation = new Object();

        // For each route, display summary information.
	var path = response.routes[0].overview_path;
	var legs = response.routes[0].legs;
        for (i=0;i<legs.length;i++) {
          if (i == 0) { 
            startLocation.latlng = legs[i].start_location;
            startLocation.address = legs[i].start_address;
            // marker = google.maps.Marker({map:map,position: startLocation.latlng});
            marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
          }
          endLocation.latlng = legs[i].end_location;
          endLocation.address = legs[i].end_address;
          var steps = legs[i].steps;
          for (j=0;j<steps.length;j++) {
            var nextSegment = steps[j].path;
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);

            }
          }
        }

        polyline.setMap(map);
        map.fitBounds(bounds);
//        createMarker(endLocation.latlng,"end",endLocation.address,"red");
	map.setZoom(18);
	startAnimation();
    }                                                    
 });
}
  

  
      var step = 50; // 5; // metres
      var tick = 100; // milliseconds
      var eol;
      var k=0;
      var stepnum=0;
      var speed = "";
      var lastVertex = 1;


//=============== animation functions ======================
      function updatePoly(d) {
        // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
        if (poly2.getPath().getLength() > 20) {
          poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]);
          // map.addOverlay(poly2)
        }

        if (polyline.GetIndexAtDistance(d) < lastVertex+2) {
           if (poly2.getPath().getLength()>1) {
             poly2.getPath().removeAt(poly2.getPath().getLength()-1)
           }
           poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d));
        } else {
          poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng);
        }
      }


      function animate(d) {
// alert("animate("+d+")");
        if (d>eol) {
          map.panTo(endLocation.latlng);
          marker.setPosition(endLocation.latlng);
          return;
        }
        var p = polyline.GetPointAtDistance(d);
        map.panTo(p);
        marker.setPosition(p);
        updatePoly(d);
        timerHandle = setTimeout("animate("+(d+step)+")", tick);
      }


function startAnimation() {
        eol=polyline.Distance();
        map.setCenter(polyline.getPath().getAt(0));
        // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON));
        // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON));
        // marker = new google.maps.Marker({location:polyline.getPath().getAt(0)} /* ,{icon:car} */);
        // map.addOverlay(marker);
        poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10});
        // map.addOverlay(poly2);
        setTimeout("animate(50)",2000);  // Allow time for the initial map display
}


//=============== ~animation funcitons =====================


</script>
</head>
<body onload="initialize()">

<div id="tools">
	start:
	<input type="text" name="start" id="start" value="ประตูน้ำ"/>
	end:
	<input type="text" name="end" id="end" value="ลาดพร้าว"/>
	<input type="submit" value="Start..." onclick="calcRoute();"/>
</div>

<div id="map_canvas" style="width:100%;height:100%;"></div>

</body>
</html>

อย่าลืมโหลดไฟล์ v3_epoly.js มาไว้ที่ไดเรคทอรี่เดียวกันด้วยครับ

Google Map API 3 ตัวอย่างการทำ Reverse Geocode หาชื่อสถานที่จากพิกัดตำแหน่ง


ตัวอย่างนี้ เป็น web map application นะครับ (not Android)
การทำ Reverse Geocode ก็คือ วิธีการหาชื่อสถานที่ ของพิกัดที่เราระบุลงไปครับ
ตัวอย่าง ดัง web นี้ครับ http://203.157.10.11/gis/gmap2.php
ซึ่งวิธีการเขียน code ก็ไม่มีอะไรมากครับ มีเพียงไฟล์เดียว
ไฟล์ gmap2.php

<html>
  <head>   
    <meta charset="tis-620">
    <title>Google Maps JavaScript API v3 Reverse Geocoding</title>   
    <script   src="http://maps.google.com/maps/api/js?sensor=false&amp;language=th-TH" ></script>
    <script>
      var geocoder;
      var map;
      var infowindow = new google.maps.InfoWindow();
      var marker;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(16.89677,100.997383);
        var mapOptions = {
          zoom: 6,
          center: latlng,
          mapTypeId: 'roadmap'
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      }

      function codeLatLng() {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              map.setZoom(12);
              marker = new google.maps.Marker({
                  position: latlng,
                  map: map
              });
              infowindow.setContent(results[1].formatted_address);
              infowindow.open(map, marker);
            } else {
              alert('No results found');
            }
          } else {
            alert('Geocoder failed due to: ' + status);
          }
        });
      }
    </script>
  </head>
  <body onload="initialize()">
By Utehn J. (Android4Health)
    <div>
      <input id="latlng" type="textbox" value="18.767560,98.963792"> <input type="button" value="คลิก Reverse Geocode" onclick="codeLatLng()">
    </div>
    <div id="map_canvas" style="height: 90%; top:40px; border: 1px solid black;"></div>
  </body>
</html>

การทำ direction ด้วย GoogleMapApi

พอดีผมไปเจอเวบนี้มาครับ http://econym.org.uk/gmap/example_cartrip2.htm

เป็นการแสดงผล direction ในแบบเท่ห์ๆ

หากท่านสนใจลอง View Source ดูครับ

แปลงข้อมูลพิกัด GPS ใน SQLite เป็นข้อมูล GIS ด้วย QGIS

สำหรับตัวอย่างนี้จะเป็นการแนะนำการแปลง
พิกัด GPS ในฐานข้อมูล SQLite
ขึ้นนำเสนอในรูปแบบ GIS ด้วยโปรแกรม QGIS

อย่างที่ผมเคยกล่าวไปแล้วในบทความก่อนๆหน้า
Smart phone นั้นสามารถที่จะบันทึกพิกัด GPS
ลงไปในฐานข้อมูล SQLite ได้

ทีนี้เมื่อเราได้ฐานข้อมูลพิกัดมาแล้ว
เราก็สามารถนำมาใช้ประโยชน์ในงานด้าน GIS
โดยวิธีการแปลงข้อมูลพิกัด GPS ใน SQLite เป็นข้อมูล GIS
ซึ่งมีขั้นตอนการทำงานดังนี้ โดยสมติว่าเราเก็บพิกัดลงในตาราง
ชื่อ house และประกอบด้วยข้อมูลดังรูป
(ผมใช้โปรแกรม Navicat for SQLite ในการทำงาน)

1)คลิกขวาที่ตาราง house เลือก Export Wizard

2)เลือกชนิดไฟล์ที่จะส่งออก

3)เลือกตาราง house และกด browse เพื่อเลือกตำแหน่งเก็บไฟล์

4) ตั้งค่ารูปแบบไฟล์ดังรูป

5)จากนั้น กด start

6)ไฟล์ที่ได้จากการส่งออกจะมีรูปแบบ ดังรูป

7)จากนั้นเปิดโปรแกรม QGIS

8)ไปที่เมนู Plugins > Manage Plugins เลือก Plugin ชื่อ
Add Delimited Text Layer ดังรูป

จะได้เมนูดังรูป

9)จากนั้นคลิกที่ปุ่ม Add Delimited Text Layer
แล้ว Browse ไปที่ไฟล์ house.txt จากนั้นกด OK ตามรูป

10)จะมีหน้าต่าง ระบบอ้างอิงตำแหน่ง ให้เลือก เลือกตามรูปแล้วกด OK

11)จะได้ชั้นข้อมูล house ซึ่งเป็น point
ตามพิกัดที่เราได้บันทึกมา

สำหรับท่านที่ไม่มีพื้นฐานทางด้าน GIS ตัวอย่างนี้
ค่อนข้างจะซับซ้อนนิดนึงครับ แต่ก็ไม่มีอะไรยากเกินพยายามครับ
ในบทความหน้า เราจะเรียนรู้ในส่วนของการแปลง point
ไปเป็น Line และ Polygon กันครับ

โปแกรมที่เกี่ยวข้อง
- QGIS
- Navacat For SQLite

Finding Locations with MySQL – การค้นหา location ด้วย mysql

ถ้าบนฐานข้อมูลของเรามีการเก็บพิกัด lat,lng ไว้ เราสามารถที่จะค้นหาข้อมูลภายในรัศมีที่เรากำหนดได้

ดังตัวอย่างต่อไปนี้ครับ

ให้สร้าง table และ insert ข้อมูล ตามโค้ดนี้

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL
) ENGINE = MYISAM ;

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Frankie Johnnie & Luigo Too','939 W El Camino Real, Mountain View, CA','37.386339','-122.085823');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Amici\'s East Coast Pizzeria','790 Castro St, Mountain View, CA','37.38714','-122.083235');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Kapp\'s Pizza Bar & Grill','191 Castro St, Mountain View, CA','37.393885','-122.078916');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Round Table Pizza: Mountain View','570 N Shoreline Blvd, Mountain View, CA','37.402653','-122.079354');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Tony & Alba\'s Pizza & Pasta','619 Escuela Ave, Mountain View, CA','37.394011','-122.095528');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Oregano\'s Wood-Fired Pizza','4546 El Camino Real, Los Altos, CA','37.401724','-122.114646');

จากนั้นลองรัน query ตาม code ด้านล่าง

SELECT id,name, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 50 ORDER BY distance LIMIT 0 , 5;

จะได้ผลลัพธ์จำนวน 5 record ที่อยู่ในรัศมี 50 ไมล์ จากจุดพิกัด lat,lng ที่ 37,-122

ปล.
ตัวเลข 3959 คือ รัศมีของโลก มีหน่วยเป็น ไมล์
ถ้าจะค้นหา เป็นหน่วยกิโลเมตร ให้เปลี่ยน 3959 เป็น 6371

อ้างอิง https://developers.google.com/maps/articles/phpsqlsearch_v3

HelloWorld กับ OpenLayers

OpenLayers เป็น JavaScript library สำหรับการพัฒนางานที่เป็น Internet GIS ซึ่งหากท่านใดสนใจศึกษาเพิ่มเติมได้ที่
http://openlayers.org

<!DOCTYPE html>
<html>
<head>
    <title>OpenLayers Mobile Layers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.mobile.css" type="text/css">
    <script src="http://openlayers.org/dev/OpenLayers.mobile.js"></script>
<script type="text/javascript">
        var lon = 100.890;
        var lat = 9.430;
        var zoom = 5;
        var map, layer;
        function init(){
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );  // Load Map จาก Web Map Service
            map.addLayer(layer);

            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
        }
</script>
<style>
            html, body {
                margin  : 0;
                padding : 0;
                height  : 100%;
                width   : 100%;
            }
            @media only screen and (max-width: 600px) {
                html, body {
                    height  : 117%;
                }
            }
            #map {
                width    : 100%;
                position : relative;
                height   : 100%;
            }
            .olControlAttribution {
                position      : absolute;
                font-size     : 10px;
                bottom        : 0 !important;
                right         : 0 !important;
                background    : rgba(0,0,0,0.1);
                font-family   : Arial;
                padding       : 2px 4px;
                border-radius : 5px 0 0 0;
            }
            #title, #tags, #shortdesc {
                display: none;
            }
</style>
</head>
<body>
        <h1 id="title">Basic Mobile Example</h1>
        <div id="tags">
            mobile
        </div>
        <p id="shortdesc">
            A basic full-screen map for mobile devices.
        </p>
        <div id="map"></div>
        <script>
            init();
        </script>
</body>
</html>

ติดตาม

Get every new post delivered to your Inbox.