Place

کامپوننت <Place /> ارائه دهنده مکان است که برای قرار یافتن یک یا مجموعه‌ای از عارضه‌های برای نمایش یک مکان یا شعبات یک سازمان بروی نقشه استفاده می‌شود.

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

یک مکان برای افزوده شدن به نقشه نیاز به تعیین گزینه‌های options و mapOptions دارد. به طوری که در options حداقل گزینه‌های lat و lng تعیین گردیده و در mapOptions گزینه id تعیین شده باشد و برای تعامل با آن، لازم است از گزینه‌های دیگر آن با توجه به نیاز، استفاده نمود.

import React, { Component } from 'react';
import { Parsimap, Place } 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 (
            <Place
                options={{ lat: 35.7449, lng: 51.375 }}
                mapOptions={{ id: 'map', height: '100%' }}
            />
        );
    }
}

مجموعه مکان‌ها

مجموعه مکان‌ها برای افزوده شدن به نقشه نیاز به تعیین گزینه‌های options و mapOptions دارد. به طوری که در options آرایه ای از گزینه‌های lat و lngتعیین گردیده و در mapOptions گزینه id تعیین شده باشد و برای تعامل با آن، لازم است از گزینه‌های دیگر آن با توجه به نیاز، استفاده نمود.

import React, { Component } from 'react';
import { Parsimap, Place } 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 (
            <Place
                options={[
                    { lat: 35.7449, lng: 51.375 },
                    { lat: 35.7575, lng: 51.414 },
                ]}
                mapOptions={{ id: 'map', height: '100%' }}
            />
        );
    }
}

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

مکان می‌تواند به صورت پیشرفته نیز بکارگرفته شود. بوسیله اعمال options می‌توان مختصات طول و عرض جغرافیایی، تصویر آیکون، محتوای پاپ آپ و رخداد کلیک بروی عارضه را تعیین نمود. توسط mapOptions می‌توان گزینه‌های

import React, { Component } from 'react';
import { Parsimap, Place } 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` is contains latitude, longitude, src of image of icon,
    // content of popup, and use `click` event of marker(s). The `mapOptions`
    // is contains relative to map.
    render() {
        return (
            <Place
                options={{
                    lat: 35.7449,
                    lng: 51.375,
                    src: 'IMAGE_SRC',
                    html: 'POPUP_CONTENT',
                    click: event => {},
                }}
                mapOptions={{ id: 'map', height: '100%' }}
            />
        );
    }
}

وابستگی‌ها

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