گاهی اوقات ممکن است که یک برنامه به ویژگی موقعیت مکانی فعلی (مثل عرض و طول جغرافیایی) شما نیاز داشته باشد. برای این کار نیاز است که ویژگی های مربوط به موقعیت مکانی فعال شوند.

خصوصیت موقعیت مکانی به شما اجازه دسترسی به موقعیت جغرافیایی فعلی و یا موقعیت یک زمان مشخص کاربران را میدهد و سرویس های خاص را بر اساس ناحیه و منطقه شان فراهم و آماده میکند.

بطور کلی ویژگی موقعیت جغرافیایی این اطلاعات مربوط به کاربر یا یوزر را در اختیار شما قرار میدهد:

• موقعیت فعلی | Current position
• ارتفاع | Altitude
• میزان سرعت | Velocity speed
• مسیر حرکت | Direction of movement
• دقت سرعت | Speed accuracy
• مهر زمان | Timestamp

در این آموزش شما یاد می گیرید که چطور موقعیت جغرافیایی یک کاربر را بر روی نقشه نشان دهید و سپس آن را آپدیت کنید.

دسترسی به موقعیت جغرافیایی

با استفاده از API جاوا اسکریپت میتوانید به موقعیت جغرافیایی یک کاربر دسترسی داشته باشید. دستور navigator.geolocation به شما اجازه میدهد که از کاربر یک سوال راجب موقعیت مکانی اش بپرسید. اگر کاربر به شما اجازه دسترسی داد، میتوانید به ویژگی های موقعیت مکانی او دسترسی داشته باشید.

دو متد برای دریافت موقعیت مکانی کاربر وجود دارد:

• () geolocation.getCurrentPosition
• () geolocation.watchPosition

در اولین قدم باید با استفاده از دستورات زیر چک کنید که آیا موقعیت مکانی کاربر فعال و در دسترس است یا نه:

1 componentDidMount() {
2    if ("geolocation" in navigator) {
3      console.log("Available");
4    } else {
5      console.log("Not Available");
6    }
7  }

اگر در خروجی کد بالا نتیجه ture بود، به این معنی است که شما میتوانید به ویژگی های مختلف موقعیت مکانی دسترسی داشته باشید. در غیر این صورت کاربر دسترسی به موقعیت مکانی اش را غیرفعال کرده.

دریافت موقعیت مکانی فعلی

با استفاده از متد () navigator.getCurrentPosition میتوانید به موقعیت فعلی کاربر دسترسی پیدا کنید.

1import React, { Component } from "react";
2import { render } from "react-dom";
3
4class App extends Component {
5  constructor(props) {
6    super(props);
7    this.state = {
8    };
9  }
10
11  componentDidMount() {
12    navigator.geolocation.getCurrentPosition(function(position) {
13      console.log("Latitude is :", position.coords.latitude);
14      console.log("Longitude is :", position.coords.longitude);
15    });
16  }
17
18  render() {
19    return (
20      <div>
21        <h4>Using geolocation JavaScript API in React</h4>
22      </div>
23    );
24  }
25}
26
27render(<App />, document.getElementById("root"));

پس از اجرای دستورات بالا کنسول را باز کنید. خروجی شما باید به شکل زیر باشد:

1 Latitude is : xx.xxxxxx
2 Longitude is : xx.xxxxxx

بر اساس موقعیت مکانی به جای xxx هر عددی میتواند قرار بگیرد.

برای دسترسی به موقعیت کامل هر کاربر کد زیر را وارد و اجرا کنید.

1componentDidMount() {
2    navigator.geolocation.getCurrentPosition(function(position) {
3      console.log(position)
4    });
5  }

خروجی که در کنسول نشان داده میشود به شکل زیر است:

1GeolocationPosition {
2    coords: GeolocationCoordinates, 
3    timestamp: 1583849180132
4    }
5    coords: { 
6        GeolocationCoordinateslatitude: 19.xxxxxxx
7        longitude: 73.xxxxxx
8        altitude: 
9            nullaccuracy: 1158
10            altitudeAccuracy: null
11            heading: null
12            speed: null
13            __proto__: GeolocationCoordinates
14        timestamp: 1583849180132
15    }
16__proto__: GeolocationPosition

دستور getCurrentPosition یک شی موفق را به عنوان یک موقعیت مکانی برمیگرداند اما یک callback یا پاسخ مجدد به همراه خواهد داشت، که ممکن است در این پاسخ مجدد خطا و ارور وجود داشته باشد. برای اینکار کد زیر اجرا شود:

1componentDidMount() {
2    navigator.geolocation.getCurrentPosition(
3      function(position) {
4        console.log(position);
5      },
6      function(error) {
7        console.error("Error Code = " + error.code + " - " + error.message);
8      }
9    );
10  }

پاسخ مجدد که ارور و خطا دارد میتواند دوباره مورد استفاده قرار بگیرد. وقتی کنسول را باز میکنید و اجازه دسترسی به موقعیت مکانی به ان نمی دهید، یک خطا بصورت زیر دریافت خواهید کرد:

Error Code = 1 – Geolocation has been disabled in this document by Feature Policy

مشاهده حرکات کاربر

متد getCurrentPosition، به شما اجازه میدهد که به موقعیت کنونی کاربر دسترسی داشته باشید. اما اگر یک کاربر موقعیتش را عوض کرد و به جای دیگری رفت متد watchPosition به دستیار تابع وصل میشود و به زودی تغییرهای موقعیت مکانی کاربر اعمال و نشان داده میشود.

کاربرانی که موقعیت جدید دارند، ویژگی موقعیت مکانی آنها با توجه به وضعیت فعلی آپدیت و به روز میشود:

1import React, { Component } from "react";
2 import { render } from "react-dom";
3
4class App extends Component {
5  constructor(props) {
6    super(props);
7    this.state = {};
8  }
9
10  componentDidMount() {
11    if (navigator.geolocation) {
12      navigator.geolocation.watchPosition(function(position) {
13        console.log("Latitude is :", position.coords.latitude);
14        console.log("Longitude is :", position.coords.longitude);
15      });
16    }
17  }
18
19  render() {
20    return (
21      <div>
22        <h4>Using geolocation JavaScript API in React</h4>
23      </div>
24    );
25  }
26}
27
28render(<App />, document.getElementById("root"));

بعد از اجرای کد بالا کنسول را که باز کنید، خواهید دید که ویژگی های موقعیت مکانی اپدیت شده و موقعیت جدید نشان داده میشود.

بعد از بدست آوردن موقعیت مکانی آن را بر روی نقشه مشخص کنید.

نقشه ها یک راه ابتدایی برای نمایش موقعیت مکانی فعلی کاربران است. شما برای ارائه موقعیت مکانی فعلی کاربر به تعدادی پارامتر مثل عرض و طول جغرافیا نیاز دارید.

نکته: قبل از استفاده از نقشه شما باید یک API KEY برای گوگل مپ داشته باشید.در غیر این صورت موقعیت مکانی بر روی نقشه کار نمیکند و به عنوان یک خطا و ارور نشان داده میشود.

این کتابخانه نقشه زیر را نصب کنید که سریعا بتوانید موقعیت مکانی را از روی نقشه پیدا کنید.

1 npm install google-maps-react

با استفاده از این کتابخانه ، میتوانید داده های موقعیت یابی شده را با توجه به پایه و اساس شان بر روی نقشه انتقال دهید، از این رو موقعیت دقیق کاربر بر روی نقشه نشان داده میشود.

یک قسمت جدید باز کنید و قطعه کد زیر را وارد کنید:

1import React, { Component } from "react";
2 import { Map, GoogleApiWrapper, Marker  } from 'google-maps-react';
3
4const mapStyles = {
5  width: '100%',
6  height: '100%'
7};
8
9class Demo1 extends Component {
10  constructor() {
11    super();
12    this.state = {
13      name: "React"
14    };
15  }
16
17  render() {
18    return (
19      <div>
20        <Map
21          google={this.props.google}
22          zoom={14}
23          style={mapStyles}
24          initialCenter={{
25            lat: YOUR_LATITUDE,
26            lng: YOUR_LONGITUDE
27          }}
28        >
29         <Marker
30          onClick={this.onMarkerClick}
31          name={'This is test name'}
32        />
33        </Map>
34      </div>
35    );
36  }
37}
38
39export default GoogleApiWrapper({
40  apiKey: 'API_KEY'
41})(Demo1);

نکته: الزامی است که به وسیله دستور API_KEY گوگل مپ تان را با API KEY جایگزین کنید.

نکته: نقشه قادر به ارائه موقعیت مربوط به تنظیمات نیست.

یک نقشه میتواند بر اساس طول و عرض جغرافیا، موقعیت مکانی دقیق کاربر را بارگیری کند. که آن موقعیت بارگیری شده در نقشه علامت گذاری و مشخص شده است.

رابط های دیگر

جاوا اسکریپت یک سری رابط برای ویژگی های موقعیتی فراهم میکند که بر اساس الزامات توابع مختلف تنظیم شده است.مانند:

• Geolocation
• GeolocationCoordinates
• GeolocationPosition
• Navigator.geolocation
• GeolocationPositionError

نتیجه گیری

در این آموزش یاد گرفتید که چگونه از API های موقعیت مکانی جاوا اسکریپت برای کار با موقعیت های کاربر و ویژگیی مرتبط با آن استفاده کنید . با تست API ها می توانید موقعیت های کاربران را بخوانید و پردازش کنید آنها را بر این اساس. اگر شما هیچ کوئری ندارید، احساس آزادی کنید برای رسیدن به codealphabet.