کامپوننت
<Tracker />
ارائه دهنده
کنترل موقعیت یابی
است که برای نمایش موقعیت فعلی کاربر در نقشه استفاده میشود و به
عنوان یک child
درون کامپوننت والد خود که
<Parsimap />
است، قرار گرفته میشود.
کنترل موقعیت یابی در سادهترین شکل خود نیازی به گزینهای خاص ندارد ولی برای تعامل با آن و یا نمایش نشانگر هنگام یافتن موقعیت، لازم است از گزینهها و استایل مدنظر این کنترل با توجه به نیاز، استفاده نمود.
import React, { Component } from 'react';
import { Parsimap, Tracker } from 'react-parsimap';
// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');
export default class App extends Component {
render() {
return (
<Parsimap
id="map"
height="100%"
center={{ lat: 35.7575, lng: 51.41 }}
>
<Tracker />
</Parsimap>
);
}
}
برای نمایش نشانگر یا آیکون هنگام یافتن موقعیت از کامپوننت
<Point />
داخل کنترل استفاده میشود. کامپوننت عارضه نقطهای میتواند در
برگیرنده
گزینهها
و
استایلبندی
خاصی باشد که با توجه به نوع کاربرد، انتخاب میشود. با بکارگیری
گزینه point
در
<Tracker />
نیازی به استفاده از کامپوننت
<Point />
نخواهد بود.
import React, { Component } from 'react';
import { Parsimap, Tracker, Point } from 'react-parsimap';
// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');
export default class App extends Component {
render() {
// Sets icon width size of marker into 35 pixel through using `Point`
// component or `point` option of `Tracker` component.
return (
<Parsimap
id="map"
height="100%"
center={{ lat: 35.7575, lng: 51.41 }}
>
{/* Using marker through `Point` component. */}
<Tracker>
<Point style={{ size: { width: 35 } }} />
</Tracker>
{/*
Using marker through `point` options of `Tracker` component.
<Tracker point={{ style: { size: { width: 35 } } }} />
*/}
</Parsimap>
);
}
}
کنترل موقعیت یابی با نشانگری به اندازه
35
پیکسلwidth
.
کنترل موقعیت یابی میتواند به صورت پیشرفته نیز بکارگرفته شود. با
استفاده از
استایلبندی
میتوان یک کلاس CSS
را برای کنترل تعیین نمود. بوسیله
اعمال
گزینهها
میتوان
موقعیت
کنترل روی نقشه را تعیین نمود. توسط
رخدادها
میتوان event
خاصی را به کنترل اختصاص داده و یا حین
یافتن موقعیت با استفاده از کامپوننت
<Point />
نشانگری را بروی نقشه نمایش داد.
import React, { Component } from 'react';
import { Parsimap, Tracker, Point } from 'react-parsimap';
// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');
export default class App extends Component {
// The `style` set a CSS class. The `options` change position of control.
// Handling specify event through `events` or show marker through `Point`
// component or `point` option of tracker.
render() {
return (
<Parsimap
id="map"
height="100%"
center={{ lat: 35.7575, lng: 51.41 }}
>
<Tracker
style={{ className: 'my-tracker' }}
options={{ position: 'top-left' }}
events={{
click: event => {},
change: event => {},
error: event => {},
}}
>
<Point style={{ size: { width: 35 } }} />
</Tracker>
</Parsimap>
);
}
}
بکارگیری کامپوننت نیازمند وابستگیهایی است که به طور کامل در بخش نصب و راهاندازی شرح داده شده است. همچنین در بخش نحوه صحیح بکارگیری درصد میتوان اطلاعاتی کاملی را جهت تعیین ارتفاع نقشه کسب نمود.