https://virgool.ir/feed/@mazyaryousefiniaسلام . خیلی متشکرم که اینجا رو میخونید . مهندسی کامپیوتر خوندمم و سالهاست روی پلتفرم های مختلف کد نویسی میکنم ،از رباتیک تا بازی ... عاشق سخت افزار و کار کردن باهاشون هستم .fa2026-11-12 04:36:18https://files.virgool.ir/upload/users/27574/avatar/79hmmz.pnghttps://virgool.ir/@mazyaryousefiniahttps://virgool.ir/iran-react-community/جست-و-جوی-نقشه-با-استفاده-از-mapbox-و-reactjs-csnlx0fzjcvh سلام امیدوارم حالتون خوب باشه . گوگل مدتهاست که سرویس نقشه خودش (google map) رو پولی کرده . هر چند که هزینش زیاد نیست ولی برای ما سخت و نشدنیه . به همین خاطر تصمیم بر اینه که بدنبال سرویس های مشابه و صد البته رایگان باشیم . خب mapbox میتونه سرویس مورد نظر ما باشه . صد البته که سرویس های دیگه مثل leaflet و mapwize هم هستن اما mapbox یه چیز دیگست ! خب ما برای مقایسه سرویس ها اینجا نیستیم ، هدف ما استفاده ازشونه پس زیاد فرقی نداره که کدوم یکی رو انتخاب میکنیم . فقط این مهمه که قشنگ استفاده کنیم ازشون . خب بریم سراغ اصل مطلب . هدف ما راه اندازی یه سیستم سرچ ساده روی مپ هست که با استفاده از Reactjs روی پلتفرم وب قراره اجرا بشه ، هست . قدم اول رو برمیداریم . من الان دارم روی ویندوز و با استفاده از Visual Studio code این کار رو انجام میدم و بهتون پیشنهاد میکنم از همین ادیتور استفاده کنید . برای نصب ری اکت به صفحه ی گیت هابش میریم و خیلی راحت با نوشتن یک کامند در ترمینال ویژال استودیو ، ری اکت رو نصب میکنیم . npx create-react-app mapbox-search cd mapbox-search npm start حرکت اول ادیت کردن فایل app.js هست که میخوایم پروژمون رو در قالبش انجام بدیم . import React, { Component } from 'react'; import './App.css'; class App extendeds Components { render() { return ( <div className="App"> <h1>جست و جوی نقشه </h1> </div> ); } } export default App; خب فایل ما این شکلی میشه . کار بعدی که باید انجام بدیم ثبت نام و دریافت access token از سایت مپ باکس هست که روال روتینی داره و به راحتی نصب میشه . اول باید پکیج مپ باکس رو نصب کنیم . با استفاده از کامند پایین :npm install mapbox-gl --save بعد از پایان نصب اول آدرس فایل css رو توی فایل App.js قرار میدیم .<link href='https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />خب خط پایین رو قبل از render اضافه کنیم : import mapboxgl from 'mapbox-gl' ...componentDidMount() { mapboxgl.accessToken = '<توکن رو اینجا قرار بدید>'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11' }); } ... <div id="map"></div>خب تبریک میگم ما یه نقشه داریم . یه مشکلی که ما داریم اینه که نقشه خوب ست نمیشه روی صفحه پس یه استایل اضافه میکنیم . #map { text-align : left; }خب بریم سراغ اضافه کردن قابلیت سرچ . برای اینکه بخوایم سرچ رو اضافه کنیم برای پکیج mapbox-gl-geocoder رو توی اپلیکیشنون نصب کنیم . برای این کار کامند زیر رو وارد میکنیم : npm i @mapbox/mapbox-gl-geocoder import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'و تکه کد کنترل رو اضافه میکنیم . map.addControl(new MapboxGeocoder({ accessToken: mapboxgl.accessToken })); باز هم مشکل استایل داریم و تکه کد رو توی فایل استایل خودمون ذخیره میکنیم . mapboxgl-control-container { position: relative; top:0 }خب حالا نقشه داریم با قابلیت سرچ . البته باید استایلش رو بر اساس سلیقه ی خودتون درست کنین . امیدوارم مورد استفاده قرار بگیره . لطفا نظراتتون رو برام بنویسید و همچنین میتونید پروژه رو از روی گیت هابم بردارید . موفق و پیروز باشید . مازیار یوسفی نیامازیار یوسفی نیاFri, 11 Jan 2019 13:52:02 +0330