گرفتن نقطه مرکزی نقشه سیدارمپ

این موضوع 1 پاسخ، 1 کاربر را دارد و آخرین بار در 4 سال، 1 ماه پیش بدست سجاد به‌روزرسانی شده است.

در حال نمایش 2 نوشته (از کل 2)

نویسنده

نوشته‌ها

آوریل 7, 2019 در 1:14 ب.ظ #29926 پاسخ

سجاد

میهمان

میخام نقطه مرکزی نقشه سیدارمپو بدست بیارم اما متدgetCenter به صورت مسقیم داخل کامپوننت cedarmap عمل نمیکنه و باید از طریق getMapbox به فانکشنای مپباکس دسترسی داشت. فانکشن getCenter هم داخل mapView مپباکس تعریف شده، چجوری بین cedarmap و mapView ارتباط برقرار کنم
نحوه استفاده از getCenter داخل مپباکس به این شکله:

import React from &#039;react&#039;;
import {Text} from &#039;react-native&#039;;
import MapboxGL from &#039;@mapbox/react-native-mapbox-gl&#039;;

import BaseExamplePropTypes from &#039;./common/BaseExamplePropTypes&#039;;
import Page from &#039;./common/Page&#039;;
import Bubble from &#039;./common/Bubble&#039;;

class GetCenter extends React.Component {
  static propTypes = {
    ...BaseExamplePropTypes,
  };

  constructor(props) {
    super(props);

    this.state = {
      center: [],
    };

    this.onRegionDidChange = this.onRegionDidChange.bind(this);
    this.getLat = this.getLat.bind(this);
    this.getLng = this.getLng.bind(this);
  }

  async onRegionDidChange() {
    const center = await this._map.getCenter();
    this.setState({center});
  }

  getLng() {
    const {center} = this.state;
    return center.length === 2 ? <code>Lng: ${center[0]}</code> : &#039;Not available&#039;;
  }

  getLat() {
    const {center} = this.state;
    return center.length === 2 ? <code>Lat: ${center[1]}</code> : &#039;Not available&#039;;
  }

  render() {
    return (
      <Page {...this.props}>
        <MapboxGL.MapView
          onRegionDidChange={this.onRegionDidChange}
          zoomLevel={9}
          ref={c => (this._map = c)}
          onPress={this.onPress}
          centerCoordinate={[-73.970895, 40.723279]}
          style={{flex: 1}}
        />

        <Bubble>
          <Text>Center</Text>
          <Text>{this.getLng()}</Text>
          <Text>{this.getLat()}</Text>
        </Bubble>
      </Page>
    );
  }
}

export default GetCenter;

import React from 'react';

import {Text} from 'react-native';

import MapboxGL from '@mapbox/react-native-mapbox-gl';

import BaseExamplePropTypes from './common/BaseExamplePropTypes';

import Page from './common/Page';

import Bubble from './common/Bubble';

class GetCenter extends React.Component {

static propTypes = {

...BaseExamplePropTypes,

};

constructor(props) {

super(props);

this.state = {

center: [],

};

this.onRegionDidChange = this.onRegionDidChange.bind(this);

this.getLat = this.getLat.bind(this);

this.getLng = this.getLng.bind(this);

}

async onRegionDidChange() {

const center = await this._map.getCenter();

this.setState({center});

}

getLng() {

const {center} = this.state;

return center.length === 2 ? <code>Lng: ${center[0]}</code> : 'Not available';

}

getLat() {

const {center} = this.state;

return center.length === 2 ? <code>Lat: ${center[1]}</code> : 'Not available';

}

render() {

return (

<MapboxGL.MapView

onRegionDidChange={this.onRegionDidChange}

zoomLevel={9}

ref={c => (this._map = c)}

onPress={this.onPress}

centerCoordinate={[-73.970895, 40.723279]}

style={{flex: 1}}

<Text>Center</Text>

<Text>{this.getLng()}</Text>

<Text>{this.getLat()}</Text>

</Bubble>

</Page>

);

}

export default GetCenter;

همین متدو چجوری داخل سیدارمپ استفاده کنم

آوریل 7, 2019 در 1:18 ب.ظ #29928 پاسخ

سجاد

میهمان

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

CedarMaps SDK is based on Mapbox Maps SDK for React Native v6.1.3 and provides extra API methods over Mapbox. For more information about how to use MapView and other components such as Adding Markers, Showing Current Location, etc., please see Mapbox for React Native First Steps.
Functions

getMap():
get the map ref object
getMapbox():
You can get main mapbox object (react-native-mapbox-gl) via getMapbox() functions attached to CedarMaps

نویسنده

نوشته‌ها

در حال نمایش 2 نوشته (از کل 2)