{"id":6021,"date":"2017-04-13T13:19:46","date_gmt":"2017-04-13T13:19:46","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=6021"},"modified":"2023-09-18T15:41:19","modified_gmt":"2023-09-18T08:41:19","slug":"dinh-vi-toa-do-google-map-bang-html-5-css3-geolocation","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/dinh-vi-toa-do-google-map-bang-html-5-css3-geolocation\/","title":{"rendered":"\u0110\u1ecbnh v\u1ecb t\u1ecda \u0111\u1ed9 Google Map b\u1eb1ng HTML 5 \u2013 CSS3 (Geolocation)"},"content":{"rendered":"\n

API geolocation trong HTML5 gi\u00fap b\u1ea1n l\u1ea5y \u0111\u01b0\u1ee3c v\u1ecb tr\u00ed ng\u01b0\u1eddi d\u00f9ng n\u1ebfu \u0111\u01b0\u1ee3c quy\u1ec1n cho ph\u00e9p, gi\u00fap b\u1ea1n s\u1eed x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed kh\u00e1ch h\u00e0ng \u0111\u1ec3 hi\u1ec7n th\u1ecb google maps tr\u00ean website… Nh\u01b0ng t\u1ecda \u0111\u1ed9 n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb ch\u00ednh x\u00e1c h\u01a1n khi x\u1eed d\u1ee5ng b\u1eb1ng thi\u1ebft b\u1ecb c\u00f3 GPS.<\/p>\n\n\n\n\n\n\n\n

C\u00e1ch d\u00f9ng Geolocation<\/h2>\n\n\n\n

D\u00f9ng h\u00e0m getCurrentPosition() \u0111\u1ec3 l\u1ea5y v\u1ecb tr\u00ed ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n

V\u00ed d\u1ee5: \u0110\u1ecbnh v\u1ecb \u0111\u01a1n gi\u1ea3n tr\u1ea3 v\u1ec1 c\u00e1c v\u0129 \u0111\u1ed9 v\u00e0 kinh \u0111\u1ed9 c\u1ee7a v\u1ecb tr\u00ed c\u1ee7a ng\u01b0\u1eddi s\u1eed d\u1ee5ng:<\/p>\n\n\n

\n<script>\n    var x = document.getElementById("demo");\n    function getLocation() {\n        if(navigator.geolocation) {\n            navigator.geolocation.getCurrentPosition(showPosition);\n        } else {\n            x.innerHTML = "Geolocation is not supported by this browser.";\n        }\n    }\n    function showPosition(position) {\n        x.innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude;\n    }\n<\/script>\n<\/pre><\/div>\n\n\n
Gi\u1ea3i th\u00edch :<\/p>\n\n\n\n
\u2022 Ki\u1ec3m tra xem c\u00f3 h\u1ed7 tr\u1ee3 \u0111\u1ecbnh v\u1ecb hay kh\u00f4ng
\u2022 N\u1ebfu c\u00f3 h\u1ed7 tr\u1ee3, ch\u1ea1y h\u00e0m getCurrentPosition(). N\u1ebfu kh\u00f4ng, hi\u1ec3n th\u1ecb th\u00f4ng b\u00e1o
\u2022 N\u1ebfu h\u00e0m getCurrentPosition() th\u1ef1c thi th\u00e0nh c\u00f4ng, tr\u1ea3 v\u1ec1 t\u1ecda \u0111\u1ed9 cho h\u00e0m showPosition()
\u2022 H\u00e0m showPosition() hi\u1ec3n th\u1ecb ra kinh \u0111\u1ed9 v\u00e0 v\u0129 \u0111\u1ed9<\/p>\n\n\n\n
V\u00ed d\u1ee5 tr\u00ean l\u00e0 m\u1ed9t \u0111o\u1ea1n x\u1eed l\u00fd r\u1ea5t c\u01a1 b\u1ea3n, kh\u00f4ng c\u00f3 b\u1eaft l\u1ed7i.<\/p>\n\n\n\n
X\u1eed l\u00fd l\u1ed7i ho\u1eb7c khi ng\u01b0\u1eddi d\u00f9ng t\u1eeb ch\u1ed1i ti\u1ebft l\u1ed9 th\u00f4ng tin v\u1ecb tr\u00ed<\/h2>\n\n\n\n
Tham s\u1ed1 th\u1ee9 hai c\u1ee7a ph\u01b0\u01a1ng th\u1ee9c getCurrentPosition() \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 x\u1eed l\u00fd l\u1ed7i. N\u00f3 quy \u0111\u1ecbnh h\u00e0m n\u00e0o s\u1ebd ch\u1ea1y n\u1ebfu c\u00f3 l\u1ed7i.<\/p>\n\n\n\n
H\u1ec7 th\u1ed1ng s\u1ebd ch\u1ec9 \u0111\u1ecbnh m\u1ed9t h\u00e0m s\u1ebd ch\u1ea1y khi l\u1ea5y v\u1ecb tr\u00ed ng\u01b0\u1eddi d\u00f9ng th\u1ea5t b\u1ea1i:<\/p>\n\n\n
\nfunction showError(error) {\n    switch(error.code) {\n        case error.PERMISSION_DENIED:\n            x.innerHTML = \u201cUser denied the request for Geolocation.\u201d\n            break;\n        case error.POSITION_UNAVAILABLE:\n            x.innerHTML = \u201cLocation information is unavailable.\u201d\n            break;\n        case error.TIMEOUT:\n            x.innerHTML = \u201cThe request to get user location timed out.\u201d\n            break;\n        case error.UNKNOWN_ERROR:\n            x.innerHTML = \u201cAn unknown error occurred.\u201d\n            break;\n    }\n}\n<\/pre><\/div>\n\n\n
– Permission denied \u2013 Ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng cho ph\u00e9p truy xu\u1ea5t \u0111\u1ebfn v\u1ecb tr\u00ed
– Position unavailable \u2013 kh\u00f4ng l\u1ea5y \u0111\u01b0\u1ee3c v\u1ecb tr\u00ed
– Timeout \u2013 ch\u1edd qu\u00e1 l\u00e2u<\/p>\n\n\n\n
Hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3 \u1edf b\u1ea3n \u0111\u1ed3 Map<\/p>\n\n\n\n
\u0110\u1ec3 hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3 ra b\u1ea3n \u0111\u1ed3, b\u1ea1n c\u1ea7n truy c\u1eadp v\u00e0o d\u1ecbch v\u1ee5 b\u1ea3n \u0111\u1ed3 nh\u01b0 d\u1ecbch v\u1ee5 Google Maps \u0111\u1ec3 s\u1eed d\u1ee5ng kinh \u0111\u1ed9 v\u00e0 v\u0129 \u0111\u1ed9.<\/p>\n\n\n
\nfunction showPosition(position) {\n    var latlon = position.coords.latitude + \u201c,\u201d + position.coords.longitude;\n    var img_url = \u201chttp:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=\u201c+latlon+\u201d&amp;amp;zoom=14&amp;amp;size=400\u00d7300&amp;amp;sensor=false\u201d;\n    document.getElementById(\u201cmapholder\u201d).innerHTML = <img src=\u2018\u201d+img_url+\u201d\u2018>\u201c;\n}\n<\/pre><\/div>\n\n\n
Th\u00f4ng tin \u0111\u1ecba \u0111i\u1ec3m c\u1ee5 th\u1ec3<\/p>\n\n\n\n
Geolocation r\u1ea5t h\u1eefu \u00edch cho vi\u1ec7c t\u00ecm ki\u1ebfm c\u00e1c \u0111\u1ecba \u0111i\u1ec3m c\u1ee5 th\u1ec3 xung quanh b\u1ea1n.<\/p>\n\n\n\n
V\u00ed d\u1ee5:<\/p>\n\n\n\n
C\u00e1c th\u00f4ng tin v\u1ec1 khu v\u1ef1c hi\u1ec7n t\u1ea1i
\u0110\u1ecba \u0111i\u1ec3m g\u1ea7n nh\u1ea5t so v\u1edbi v\u1ecb tr\u00ed hi\u1ec7n t\u1ea1i
\u0110\u1ecbnh h\u01b0\u1edbng (GPS)<\/p>\n\n\n\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
API geolocation trong HTML5 gi\u00fap b\u1ea1n l\u1ea5y \u0111\u01b0\u1ee3c v\u1ecb tr\u00ed ng\u01b0\u1eddi d\u00f9ng n\u1ebfu \u0111\u01b0\u1ee3c quy\u1ec1n cho ph\u00e9p, gi\u00fap b\u1ea1n s\u1eed […]<\/p>\n","protected":false},"author":6,"featured_media":8031,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-6021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"views":486,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/6021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=6021"}],"version-history":[{"count":11,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/6021\/revisions"}],"predecessor-version":[{"id":8722,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/6021\/revisions\/8722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/8031"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=6021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=6021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=6021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}