شیء نقشه

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

رخداد ready نقشه

از طریق رخداد ready نقشه می‌توان به Instance دسترسی داشت، برای انجام اینکار لازم است که هنگام ایجاد نقشه توسط کامپوننت <Parsimap /> گزینه ready مربوط به رخدادهای نقشه دارای متدی به صورت callback باشد تا بتوان از آرگومان این رخداد که همان Instance نقشه است، استفاده نمود. باید توجه داشت متد موجود در این رخداد بلافاصله پس از بارگزاری کامل نقشه صدازده خواهد شد.

import React, { Component } from 'react';
import { Parsimap } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

export default class App extends Component {
    // Access to map instance and using `setView` method, through assign a
    // `callback` into `ready` event and after map fully loaded this callback
    // called and map instance argument at it can be used.
    render() {
        return (
            <Parsimap
                id="map"
                center={{ lat: 35.7575, lng: 51.41 }}
                events={{
                    ready: map => map.setView({ lat: 35.75, lng: 51.42 }),
                }}
            />
        );
    }
}

تغییر مختصات مرکز نقشه بلافاصله پس از بارگزاری نقشه.

متغییر سراسری maps

maps ارائه دهنده Instanceهای مربوط به نقشه‌های ایجاد شده است. این نوع دسترسی زمانی قابل استفاده است که نقشه بارگزاری شده و یا درون متدهایی که اجرای آن همزمان با بارگزاری نقشه نباشد، قابل بکارگیری است. به عنوان نمونه می‌توان در اجزائی مانند <button /> به محتوای داخل maps دسترسی داشت. برای دسترسی به Instance یک نقشه ایجاد شده لازم است با توجه به شناسه یا id مربوط به آن که هنگام ایجاد نقشه توسط کامپوننت <Parsimap /> تعیین شده است، از طریق id مربوطه propery را از آبجکت maps خواند.

import React, { Component } from 'react';
import { Parsimap, maps } from 'react-parsimap';

// Set API Key via static `setKey` method of imported `Parsimap` class.
Parsimap.setKey('API_KEY');

export default class App extends Component {
    constructor() {
        super();

        // Access to map instance and using `setView` method of map.
        // The `mymap` is created by `Parsimap` component.
        setTimeout(() => {
            maps.mymap.setView({ lat: 35.75, lng: 51.42 });
        }, 2000);
    }

    render() {
        return <Parsimap id="mymap" center={{ lat: 35.7575, lng: 51.41 }} />;
    }
}

تغییر مختصات مرکز نقشه 2 ثانیه پس از بارگزاری نقشه.