Deprecated: تابع Yoast\WP\SEO\Conditionals\Schema_Blocks_Conditional::get_feature_flag از نگارش Yoast SEO 20.5 که جایگزینی برای آن در دسترس نیست منسوخ شده است. in /var/www/html/wp-includes/functions.php on line 6078 Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-includes/functions.php:6078) in /var/www/html/wp-includes/rest-api/class-wp-rest-server.php on line 1831 {"id":5141,"date":"2021-04-19T15:32:09","date_gmt":"2021-04-19T11:02:09","guid":{"rendered":"https:\/\/help.map.ir\/?post_type=manual_documentation&p=5141"},"modified":"2021-09-19T15:00:54","modified_gmt":"2021-09-19T10:30:54","slug":"basic-search","status":"publish","type":"manual_documentation","link":"https:\/\/help.map.ir\/documentation\/react-examples\/basic-search\/","title":{"rendered":"\u062c\u0633\u062a\u200c\u0648\u062c\u0648 (\u0633\u0627\u062f\u0647)"},"content":{"rendered":"\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u062c\u0633\u062a\u200c\u062c\u0648\u06cc \u0633\u0627\u062f\u0647 \u0631\u0648 \u0628\u0647 \u0646\u0642\u0634\u0645\u0648\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u062a\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Mapir \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u0641\u0627\u06cc\u0644 App.js \u06cc\u0627 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u06cc\u06af\u0631\u06cc \u0648\u0627\u0631\u062f \u0634\u0648\u062f. \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0644\u06cc\u062f API \u0646\u0642\u0634\u0647\u0654 \u0645\u067e \u0631\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f. <\/p>\n\n\n\n

\u0627\u06af\u0631 \u0647\u0646\u0648\u0632 \u06a9\u0644\u06cc\u062f API\u200c \u062e\u0648\u062f\u062a\u0648\u0646 \u0631\u0648 \u0646\u06af\u0631\u0641\u062a\u06cc\u062f\u060c \u0627\u06cc\u0646\u062c\u0627<\/a> \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u06cc\u0645. \ud83d\ude09\ud83d\udd11<\/p>\n\n\n\n

import React, { useEffect, useState, useRef } from 'react';\nimport '.\/style.css';\nimport Mapir from 'mapir-react-component';\nimport { search } from '.\/API';\n\nimport '.\/api-key';\n\nconst Map = Mapir.setToken({\n  transformRequest: url => {\n    return {\n      url: url,\n      headers: {\n        'x-api-key': Your_API_Key, \/\/Mapir api key\n        'Mapir-SDK': 'reactjs'\n      }\n    };\n  }\n});\n\nexport default function App() {\n  const [text, setText] = useState('');\n  const [results, setResults] = useState([]);\n  const [marker, setMarker] = useState(null);\n  const [center, setCenter] = useState([51.42047, 35.729054]);\n\n  useEffect(() => {\n    if (text.length > \u06f1) {\n      const params = {};\n      const options = { text };\n      for (let key in options) {\n        if (options[key] !== null && options[key] !== '') {\n          params[key] = options[key];\n        }\n      }\n      search(params)\n        .then(data => data.json())\n        .then(data => {\n          if (data['odata.count'] > \u06f0) {\n            setResults(data.value);\n          } else {\n            setResults([{ notFound: true }]);\n          }\n        });\n    } else if (text.length === 0) {\n      setResults([]);\n    }\n  }, [text]);\n\n  function clearSearch() {\n    setResults([]);\n    setText('');\n  }\n\n  return (\n    <>\n      <div className=\"App\">\n        <Mapir center={center} zoom={[10]} Map={Map}>\n          {marker !== null && (\n            <Mapir.Marker\n              coordinates={[marker.lng, marker.lat]}\n              anchor=\"bottom\"\n              Image={'https:\/\/map.ir\/css\/images\/marker-default-blue.svg'}\n            \/>\n          )}\n        <\/Mapir>\n      <\/div>\n      <div class=\"container search-box\">\n        <div class=\"container search-box__item flex-row\">\n          <input\n            autocomplete=\"off\"\n            type=\"text\"\n            id=\"search\"\n            placeholder=\"\u062f\u0646\u0628\u0627\u0644 \u06a9\u062c\u0627 \u0645\u06cc&zwnj;\u06af\u0631\u062f\u06cc\u062f...\"\n            onChange={e => setText(e.target.value)}\n            value={text}\n          \/>\n          {results.length > \u06f0 && (\n            <div class=\"clear-seach\" onClick={() => clearSearch()}>\n              <span> &#10006; <\/span>\n            <\/div>\n          )}\n          <div class=\"btn-seach\">\n            {' '}\n            <span>\u0628\u0631\u0648<\/span>\n          <\/div>\n        <\/div>\n        {results.length > \u06f0 && (\n          <div class=\"container search-box__item search-results\">\n            {results.map(item => {\n              if (item.notFound === true) {\n                return <p>\u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f<\/p>;\n              } else {\n                return (\n                  <div\n                    onClick={() => {\n                      setMarker({\n                        lng: item.geom.coordinates[0],\n                        lat: item.geom.coordinates[1]\n                      });\n                      setCenter(item.geom.coordinates);\n                    }}\n                    className=\"search-result-item\"\n                  >\n                    <p className=\"search-result-item-title\">\n                      <img src=\"https:\/\/map.ir\/css\/images\/marker-default-white.svg\" \/>\n                      {item.title}\n                    <\/p>\n                    <p className=\"search-result-item-address\">{item.address}<\/p>\n                  <\/div>\n                );\n              }\n            })}\n          <\/div>\n        )}\n      <\/div>\n    <\/>\n  );\n}\n<\/pre>\n\n\n