Geocode

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

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

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

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

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

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

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

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

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

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

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

import React, { Component } from 'react';
import { Parsimap, Geocode, 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 or changing size of width. The `options`
    // make search box into real-time search list or change placeholder text or
    // change position of control. Handling specify event through `events` or
    // show marker through `Point` component or `point` option of geocode.
    render() {
        return (
            <Parsimap
                id="map"
                height="100%"
                center={{ lat: 35.7575, lng: 51.41 }}
            >
                <Geocode
                    style={{ width: 250, className: 'my-geocode' }}
                    options={{
                        autocomplete: true,
                        placeholder: 'Enter the address...',
                        position: 'top-right',
                    }}
                    events={{ result: event => {} }}
                >
                    <Point style={{ size: { width: 35 } }} />
                </Geocode>
            </Parsimap>
        );
    }
}

وابستگی‌ها

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