Դաս 22: Geolocation

0

Այս դասը վերաբերվում է աշխարհագրական դիրքին՝ գեոլոկացիային։

Գեոլոկացիա

Գեոլոկացիան API-ն է, որը վերադառնում է և կարող է ցուցադրել ձեր ֆիզիկական դիրքը աշխարհում։  Դրանք կարող են ներկայացվել, որպես կոորդինատներ (լայնություն և երկայնություն) կամ քարտեզ: Խնդրում ենք ուշադիր եղեք, թե ինչ կառաջարկի Ձեր բրաուզերը, նախքան վստահելի կայքերին թույլ տալը աշխատեցնել API-ն: Գաղտնիությունը միշը մտահոգում է բոլորիս, այնպես որ դուք չեք կարող ստիպել որևէ մեկին օգտագործել այս API-ը:

Geolocation-ը կառուցված է երկու բանից՝

  • Կոճակ, որը կոչում է script-ին ստանալ կոորդինատներ:
  • Script, որը, ըստ էության, ընտրում և ցուցադրում է կոորդինատները (կամ ցուցադրում է հաղորդագրություն, եթե բրաուզերը չի աջակցում այն):

Գեոլոկացիայի համար նախատեսված ֆունկցիան կոչվում է getCurrentPosition ()։ Մենք ակտիվացնում ենք այն՝ օգտագործելով getLocation () –ը button տարրում և հաջորդող script-ում։

Ահա ամբողջական code script-ը գելոկացիա ունեցող պարզ էջի համար։

Այնուհետև կդիտարկենք այն մաս մաս։

HTML

        <p id=”html.net”>Where are you in the world?</p>

        <button onclick=”getLocation()”>Get Coordinates</button>

Javascript

 <script>

           function getLocation(){

            if (navigator.geolocation) {

              navigator.geolocation.getCurrentPosition(showPosition);

              } else {

                 document.getElementById(“html.net”).innerHTML=”Geolocation is not supported by this browser.”;

                 }

            }

                      function showPosition(position) {

            document.getElementById(“html.net”).innerHTML=”Latitude: ” + position.coords.latitude +            “<br>Longitude: ” + position.coords.longitude;

            }

 </script>

Նախ դիտարկենք HTML-ը: Այն ներառում է ID, որը հետագայում օգտագործվում է script-ում (id = “html.net»), ինչպես նաև event button-ում և ֆունկցիայում, որը մենք անվանում ենք getLocation (). Այս կոդը կարող է լինել ձեր էջի ցանկացած հատվածում:

Հաջորդը, դիտարկենք Javascript-ը: Մենք սկսել ենք script տարրը (Հիշեք, որ այն տեղադրվում <head> տարրում կամ նախքան </ body> թեգը): Այնուհետեւ, մենք ակտիվացրել ենք գեոլոկացիան։

                function getLocation()

Դրանից հետո, մենք քողարկում ենք իրավիճակը, երբ գեոլոկացիան չի աջակցվում բրաուզերի կողմից կախված վերջինս տարբերակից կամ այն պատճառով, որ բրաուզերում JavaScript-ը անջատված է: Այդ դեպքում կցուցադրվի հետևյալ հաղորդագրությունը՝ Geolocation is not supported by this browser։

        function getLocation(){

          if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(showPosition);

            } else {

            document.getElementById(“html.net”).innerHTML=”Geolocation is not supported by this browser.”;            }

          }

Դրանից հետո, ակտիվացնում ենք ևս մեկ ֆունկցիա, քանի որ մենք ոչ միայն ուզում ենք պարզապես ստանալ տեղանքը, այլ նաև ցույց տալ ընթերցողին կոորդինատները:

function showPosition(position)  {

    document.getElementById(“html.net”).innerHTML=”Latitude: ” + position.coords.latitude +          “<br>Longitude: ” + position.coords.longitude;

          }

Ներսում գտնվող տեքստը կարելի է փոփոխել: Դա այն է, ինչ մարդիկ կտեսնեն։

Script-ը անհրաժեշտ է վերջացնել </ script> -ով, և այն ավարտված է:

Ցույց տալ այն օգտագործելով Google Maps

Եթե ուզում եք ցույց տալ քարտեզի վրա նշված կոորդինատները, ապա պետք է փոխել վերը նշված սկրիպտ հետևյալով.

 function showPosition(position){

          var latlon=position.coords.latitude+”,”+position.coords.longitude;

  var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”       +latlon+”&zoom=14&size=400×300&sensor=false”;

          document.getElementById(“html.net”).innerHTML=”<img src='”+img_url+”‘>”;

          }

Փորձեք ինքներդ! Պատճենեք և տեղադրեք ամբողջական կոդը նոր էջում, հիշեք այն և վերբեռնեք ինտերնետում։ Փորձեք նաև օգտագործելով Google Maps-ի տարբերակը:

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.