คุณสมบัติใหม่ของ html5 คือ Geolocation API ช่วยให้ browser สามารถส่งตำแหน่งของตัวมันเองกลับไปให้ server ได้โดยใช้ตำแหน่ง gps หรือจากหมายเลข ip
แต่เพราะมันกระทบถึงความเป็นส่วนตัว ในการเขียนจึงต้องเผื่อว่า user ไม่อนุญาตให้ส่งตำแหน่งของตัวเองกลับมาไว้ด้วย ในตัวอย่างใช้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* get position from HTML5 Geolocation */function getGeolocation() { var position = false; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(successCallback, errorCallback) { position = successCallback.coords; document.getElementById('latitudeA').innerHTML = successCallback.coords.latitude; document.getElementById('longitudeA').innerHTML = successCallback.coords.longitude; }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { /*Browser doesn't support Geolocation*/ handleLocationError(false, infoWindow, map.getCenter()); return false; } return position;} |
ส่ง position กลับมา ให้
1 2 3 4 5 6 7 8 9 10 11 12 | function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) { position = getGeolocation(); if (position == false || position == null || position === undefined || position.length <= 0 || typeof position == 'undefined') { position = { "latitude": defaultLatitude, "longitude": defaultLongitude, }; } createMap('mapA', position);} |
แต่ถ้าหากไม่มีพิกัดส่งมา จะนำค่า default มาแสดงแทน
คุณสามารถดูตัวอย่างได้จาก google maps: HTML5.Geolocation หรือลองสร้างไฟล์ตามตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!doctype html><html><head><meta charset="utf-8"><title>Google Maps APIs > Maps JavaScript API > HTML5 Geolocation</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link href="styles.css" rel="stylesheet" type="text/css"></head><body><div class="container"> <div class="row"> <div class="col-md-2"> <h3>HTML5 Geolocation</h3> <dl> <dt>latitude</dt> <dd id="latitudeA"></dd> <dt>longitude</dt> <dd id="longitudeA"></dd> </dl> </div> <div class="col-md-10 map" id="mapA"></div> </div></div><script>var infoWindow;var map;var position = false;/* function createMaps */function createMap(mapArea, position) { var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude)); var infoWindow = new google.maps.InfoWindow; var map = new google.maps.Map(document.getElementById(mapArea), { "zoom": 18 }); map.setCenter(latlng); var marker = new google.maps.Marker({ "map": map, "position": latlng, }); infoWindow.open(map, marker); infoWindow.setContent('Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude); infoWindow.setPosition(latlng);}/* get position from HTML5 Geolocation */function getGeolocation() { var position = false; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(successCallback, errorCallback) { position = successCallback.coords; document.getElementById('latitudeA').innerHTML = successCallback.coords.latitude; document.getElementById('longitudeA').innerHTML = successCallback.coords.longitude; }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { /*Browser doesn't support Geolocation*/ handleLocationError(false, infoWindow, map.getCenter()); return false; } return position;}/* show error of HTML5 Geolocation */function handleLocationError(browserHasGeolocation, infoWindow, position) { infoWindow.setPosition(position); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); infoWindow.open(map);}function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) { position = getGeolocation(); if (position == false || position == null || position === undefined || position.length <= 0 || typeof position == 'undefined') { position = { "latitude": defaultLatitude, "longitude": defaultLongitude, }; } createMap('mapA', position);}</script><script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDE5zb4r9sbN5S_GcD3NZRED1Ma3FzFqso"></script></body></html> |
About the author