مستندات پارسی‌مپ

مستندات / فریم‌ورک ریکت / کامپوننت‌ها / موقعیت یابی

Tracker

کامپوننت <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>
        );
    }
}

وابستگی‌ها

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