Selector

کامپوننت <Selector /> ارائه دهنده ابزار انتخاب‌گر است که برای انتخاب مکانی خاص در نقشه استفاده می‌شود و به عنوان یک child درون کامپوننت والد خود که <Parsimap /> است، قرار گرفته می‌شود.

طریقه استفاده پایه

ابزار انتخاب‌گر در ساده‌ترین شکل خود نیازی به گزینه‌ای خاص ندارد ولی برای تعامل با آن و یا نمایش نشانگر هنگام انتخاب مکان، لازم است از گزینه‌ها و استایل مدنظر این ابزار با توجه به نیاز، استفاده نمود.

import React, { Component } from 'react';
import { Parsimap, Selector } 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 }}
            >
                <Selector />
            </Parsimap>
        );
    }
}

بکارگیری نشانگر

برای سفارشی سازی نشانگر یا آیکون هنگام انتخاب مکان از کامپوننت <Point /> داخل ابزار استفاده می‌شود. کامپوننت عارضه نقطه‌ای می‌تواند در برگیرنده گزینه‌ها و استایل‌بندی خاصی باشد که با توجه به نوع کاربرد، انتخاب می‌شود. با بکارگیری گزینه point در <Selector /> نیازی به استفاده از کامپوننت <Point /> نخواهد بود.

import React, { Component } from 'react';
import { Parsimap, Selector, 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 `Selector` component.
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                {/* Using marker through `Point` component. */}
                <Selector>
                    <Point style={{ size: { width: 35 } }} />
                </Selector>

                {/* 
                    Using marker through `point` options of `Selector` component.
                    <Selector point={{ style: { size: { width: 35 } } }} />
                */}
            </Parsimap>
        );
    }
}

ابزار انتخاب‌گر با نشانگری به اندازه 35 پیکسل width.

بکارگیری پیشرفته

ابزار انتخاب‌گر می‌تواند به صورت پیشرفته نیز بکارگرفته شود. بوسیله اعمال گزینه‌ها می‌توان آدرس مکان انتخاب شده را دریافت نمود. توسط رخدادها می‌توان event خاصی را به ابزار اختصاص داده و یا حین انتخاب مکان با استفاده از کامپوننت <Point /> نشانگری را بروی نقشه نمایش داد. هر ابزار می‌تواند شامل نوع fixed باشد که در این صورت بجای انتخاب مکان از طریق کلیک بروی نقطه‌ای خاص از نقشه تنها نیاز است که موقعیت مرکز نقشه از طریق سطح بزرگنمائی و جابه جائی، تغییر یابد.

import React, { Component } from 'react';
import { Parsimap, Selector, 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 `options` return address of selected location. Handling specify
    // event through `events` or show marker through `Point` component or
    // `point` option of selector.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Selector
                    type="fixed"
                    options={{ areaInfo: true }}
                    events={{ result: event => {} }}
                >
                    <Point style={{ size: { width: 35 } }} />
                </Selector>
            </Parsimap>
        );
    }
}

وابستگی‌ها

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