CINXE.COM
Пошуковий віджет — Visicom API
<!DOCTYPE html> <html lang="uk"> <head> <meta charset="utf-8"/> <meta name="format-detection" content="telephone=no"/> <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no"/> <meta name="theme-color" content="#2875B6"/> <meta name="msapplication-navbutton-color" content="#2875B6"/> <meta name="apple-mobile-web-app-status-bar-style" content="#2875B6"/> <meta name="format-detection" content="telephone=no"/> <meta name="google" content="notranslate"/> <meta property="og:description" content="Віджет дозволяє додати на сайт пошук об'єктів за адресою, координатам, назвою і іншим параметрам. Можна додати свої власні об'єкти для видачі в рядку пошуку. "/> <meta name="keywords" content="пошуковий віджет, пошук об'єктів, карти Візіком, ключ доступу, Visicom Data API, геокод, " /> <meta name="description" content="Віджет дозволяє додати на сайт пошук об'єктів за адресою, координатам, назвою і іншим параметрам. Можна додати свої власні об'єкти для видачі в рядку пошуку. " /> <link rel="icon" type="image/png" href="https://api.visicom.ua/media/img/icon_site.png" /> <link rel="stylesheet" href="https://api.visicom.ua/wro/pub.css?1722258566000"/> <link rel="stylesheet" media="(min-width: 720px) and (max-width: 1050px)" href="https://api.visicom.ua/wro/pub-middle.css?1722258566000"> <link rel="stylesheet" media="(max-width: 720px)" href="https://api.visicom.ua/wro/pub-small.css?1722258566000"> <link rel="stylesheet" href="https://api.visicom.ua/apps/visicom-autocomplete.min.css?1722258566000"/> <link rel="alternate" href="https://api.visicom.ua/rss/?lang=uk" type="application/rss+xml" title="RSS" /> <title>Пошуковий віджет — Visicom API</title> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1685104-6"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments)}; gtag('js', new Date()); gtag('config', 'UA-1685104-6'); gtag('config', 'AW-694771078'); </script> </head> <body> <div id="site"> <div id="header-wrp"> <header class="main morph-dropdown"> <div class="logo uk"> <a href="https://api.visicom.ua"></a> </div> <div class="menu"> <nav class="small-nav"> <ul> <li><a href="https://api.visicom.ua/uk/products">Продукти</a></li> <li><a href="https://api.visicom.ua/uk/price">Ціни</a></li> <li><a href="https://api.visicom.ua/uk/docs">Документи</a></li> <li><a href="https://api.visicom.ua/uk/posts">Блог</a></li> </ul> </nav> <nav class="main-nav"> <ul> <li class="has-dropdown" data-content="products"> <span class="link">Продукти</span> </li> <li class="has-dropdown" data-content="devs"> <span class="link">Розробникам</span> </li> <li> <a href="https://api.visicom.ua/uk/price">Ціни</a> </li> <li class="has-dropdown" data-content="company"> <span class="link">Компанія</span> </li> <li> <a href="https://api.visicom.ua/uk/posts">Блог</a> </li> </ul> </nav> <div class="morph-dropdown-wrp" id="morph-dropdown-hide"> <div class="dropdown-list"> <ul> <li id="products" class="dropdown"> <div class="content"> <div class="nav-group"> <div class="nav-item dapi"> <div class="title"> <a href="https://api.visicom.ua/uk/products/data-api"> Visicom Data API </a> </div> <div class="desc"> <a href="https://api.visicom.ua/uk/products/data-api"> Доступ до даних, а також вирішення задач логістики </a> </div> </div> <div class="nav-item etms"> <div class="title"> <a href="https://api.visicom.ua/uk/products/tiles"> Visicom Tiles </a> </div> <div class="desc"> <a href="https://api.visicom.ua/uk/products/tiles"> Зберігання та доступ до фрагментів для візуалізації </a> </div> </div> </div> <div class="nav-group highlighted"> <ul class="strong"> <li><a href="https://maps.visicom.ua/?lang=uk">Візіком Карти</a></li> <li><a href="https://api.visicom.ua/uk/products/tracker">Візіком Трекер</a></li> </ul> </div> </div> </li> <li id="devs" class="dropdown"> <div class="content"> <div class="nav-group"> <div class="nav-item dapi"> <div class="title">Visicom Data API</div> <ul> <li><a href="https://api.visicom.ua/uk/products/data-api/data-api-references">Довідник Data API</a></li> <li><a href="https://api.visicom.ua/uk/products/data-api/category-list">Довідник категорій</a></li> <li><a href="https://api.visicom.ua/uk/products/data-api/service-coverage">Покриття послуги</a></li> </ul> </div> <div class="nav-item etms"> <div class="title">Visicom Tiles</div> <ul> <li><a href="https://api.visicom.ua/uk/products/tiles/tiles-references">Специфікація тайлів</a></li> <li><a href="https://api.visicom.ua/uk/products/tiles/fragments-references">Специфікація фрагментів</a></li> <li><a href="https://api.visicom.ua/uk/products/tiles/tiles-dataset">Набори даних та стилі</a></li> </ul> </div> </div> <div class="nav-group highlighted"> <div class="title">Інструменти</div> <ul> <li><a href="https://api.visicom.ua/uk/tools/autocomplete-widget">Пошуковий віджет</a></li> <li><a href="https://api.visicom.ua/uk/tools/map-add">Підключення карти</a></li> <li><a href="https://api.visicom.ua/uk/tools/simple-maps">Конструктор карти</a></li> <li><a href="https://api.visicom.ua/uk/iframe/geojson-editor">GeoJSON Editor</a></li> </ul> </div> </div> </li> <li id="company" class="dropdown"> <div class="content"> <div class="nav-group"> <ul> <li><a href="https://api.visicom.ua/uk/company">Про нас</a></li> <li><a href="https://api.visicom.ua/uk/company/mission">Місія компанії</a></li> <li><a href="https://api.visicom.ua/uk/docs/copyright">Заява про авторські права</a></li> <li><a href="https://api.visicom.ua/uk/docs/privacy">Політика конфіденційності</a></li> <li><a href="https://api.visicom.ua/uk/company/brands">Правила використання бренду</a></li> </ul> </div> </div> </li> </ul> </div> </div> </div> <div> <div class="menu-button"></div> <div class="sign"> <a href="https://api.visicom.ua/accounts/login">Увійти</a> </div> <div class="langpicker"> <select name="lang" id="lang-select-index" onchange="langChange('lang-select-index', 'pub')" autocomplete="off"> <option value="uk" selected>Українська</option> <option value="en" >English</option> </select> </div> </div> </header> </div> <nav class="parents"> <ul> <li><a href="https://api.visicom.ua">Головна</a></li> → <li> <a href="https://api.visicom.ua/uk/tools">Інструменти</a> → </li> <li> Пошуковий віджет </li> </ul> </nav> <div id="related-links"> <nav class="childs"> <ul> <li> Пошуковий віджет </li> <li> <a href="https://api.visicom.ua/uk/tools/map-add">Підключення карти</a> </li> <li> <a href="https://api.visicom.ua/uk/tools/simple-maps">Конструктор карти</a> </li> </ul> </nav> </div> <div id="content-wrp"> <main class="simple md"> <h2>Пошуковий віджет</h2> <p>Даний віджет дозволяє додати на ваш сайт пошук різних об'єктів за адресою, координатами, назвою чи іншими параметрами. Ви також можете додати свої власні об'єкти для пошуку. Також цей віджет легко комбінувати з нашою картою. Ви можете ознайомитися з кодом віджету на нашій сторінці <a rel="nofollow" href="https://github.com/visicom-api/visicom-autocomplete">GitHub</a>.</p> <h3>Підготовка сторінки</h3> <p>Для підключення віджета необхідно виконати декілька кроків:</p> <ol> <li><a href="https://api.visicom.ua/accounts/forms?action=register_form&lang=uk">Отримати ключ доступу</a> до сервісів <a href="/uk/products/tiles">«Visicom Tiles»</a> та <a href="/uk/products/data-api">«Visicom Data API»</a>.</li> <li>У розділі <code>head</code> сторінки підключити СSS файл зі стилями віджету</li> </ol> <pre><code class="language-markup"><link rel="stylesheet" href="https://api.visicom.ua/apps/visicom-autocomplete.min.css"> </code></pre> <ol start="3"> <li>Додати завантаження коду, бажано перед замикаючим тегом <code>body</code>.</li> </ol> <pre><code class="language-markup"><script src="https://api.visicom.ua/apps/visicom-autocomplete.min.js"></script> </code></pre> <ol start="4"> <li>Визначити <code>div</code> в якому буде відображено віджет. Наявність елементу з тегом <code><a></code> обов'язкова. Цей елемент зникне при ініціалізації.</li> </ol> <pre><code class="language-markup"><div id="visicom-autocomplete"> <a href="https://api.visicom.ua/" target="_blank">© Visicom</a> </div> </code></pre> <h3>Ініціалізація віджета</h3> <p>Для ініціалізації віджета необхідно вставити наступний код між тегами <code>script</code>:</p> <pre><code class="language-javascript">let ac = new visicomAutoComplete({ apiKey : 'YOUR_API_KEY', }); </code></pre> <p>Не забудьте замінити <strong>YOUR_API_KEY</strong> на ключ, отриманий при реєстрації. Крім параметра <strong>apiKey</strong> є також інші корисні опції. На даний момент підтримуються опції:</p> <ul> <li><strong>apiKey</strong> — ваш ключ доступу до <a href="/uk/products/data-api">«Visicom Data API»</a> (<strong>обов'язковий</strong>, якщо не вказані посилання для проксі)</li> <li><strong>selector</strong> — селектор елементу, в якому створюється віджет (<strong>опціонально</strong>, default = '#visicom-autocomplete')</li> <li><strong>width</strong> — ширина віджета (<strong>опціонально</strong>, default = '100%')</li> <li><strong>height</strong> — висота віджета (<strong>опціонально</strong>, default = 'null')</li> <li><strong>placeholder</strong> — текст, що виводиться при пустому полі вводу (<strong>опціонально</strong>, default = 'Search...')</li> <li><strong>minCahrs</strong> — мінімальна кількість символів, при якому почнеться пошук (<strong>опціонально</strong>, default = 3). Чим менше число, тим більше буде використано запитів</li> <li><strong>delay</strong> — затримка між вводом символів, за якої починається пошук, мс (<strong>опціонально</strong>, default = '150'). Чим менше число, тим більше буде використано запитів</li> <li><strong>suggestsLimit</strong> — максимальна кількість знайдених варантів, що відображається (<strong>опціонально</strong>, default = '5')</li> <li><strong>maxCharsInSuggest</strong> — максимальна кількість символів, що виводиться у випадаючому списку (<strong>опціонально</strong>, default = '55')</li> <li><strong>lang</strong> — мова пошуку (<strong>опціонально</strong>, default = 'local', можна також вказати одну з: 'uk', 'en', 'ru')</li> <li><strong>searchTextPrefix</strong> — цей текст, при пошуку, буде вставлено перед текстом із поля вводу. Так Ви можете вказати своє місто, щоб пошук відбувався біля нього (<strong>опціонально</strong>, default = '')</li> <li><strong>onSuggestSelected</strong> — функція, котра буде викликана при виборі підказки з випадаючого списку (<strong>опціонально</strong>, default = () => console.log)</li> <li><strong>map</strong> — створений об'єкт map (при використанні бібліотеки Leaflet) (<strong>опціонально</strong>). При виборі підказки карта відобразить це місце. Якщо не вказан, то буде викликана тільки функція onSuggestSelected</li> <li><strong>marker</strong> — ваш власний маркер для відображення на карті (<strong>опціонально</strong>)</li> <li><strong>proxyApiGeocodeUrl</strong> — адреса для проксування запиту типу geocode (<strong>опціонально</strong>). При цьому вам не треба вказувати ваш ключ доступу до <a href="/uk/products/data-api">«Visicom Data API»</a>. На ваш сервер буде відправлено GET запит з наступними параметрами: text (текст, що шукається), lang, key (API key), limit (suggestsLimit)</li> <li><strong>proxyApiFeatureUrl</strong> — адреса для проксування запиту типу feature (<strong>опціонально</strong>). При цьому вам не треба вказувати ваш ключ для доступу до <a href="/uk/products/data-api">«Visicom Data API»</a>. На ваш сервер буде відправлено GET запит з наступними параметрами: feature_id (id об'єкту feature, що шукається), lang, key (API key)</li> <li><strong>includeCategories</strong> — тільки об'єкти, що мають одну з цих категорій залишаться у результатах (<strong>опціонально</strong>, масив string, default = [])</li> <li><strong>excludeCategories</strong> — об'єкти, що мають одну з цих категорій видаляються з результатів (<strong>опціонально</strong>, масив string, default = [])</li> <li><strong>customFeatures</strong> — масив ваших об'єктів (<strong>опціонально</strong>). Об'єкти з цього списку будуть мати вищий пріоритет при відображенні в підказках. Кожен об'єкт в масиві повинен мати 3 поля: html (текст, що відображається в підказці), keywords (текст, який складається з ключових слів для пошуку), coords (масив з двух координат вашого об'єкту)</li> </ul> <p>При використанні проксі серверу обов'язково повертати тотожний JSON об'єкт, який отримав Ваш сервер від <a href="/uk/products/data-api">«Visicom Data API»</a>.</p> <p>При ініціалізації віджету в Javascript буде повернено об'єкт, що має наступні методи:</p> <ul> <li><strong>clear</strong> — очищає поле вводу і всі варіанти у списку</li> </ul> <h3>Зразок разом з картою</h3> <pre><code class="language-markup"><!DOCTYPE html> <html lang="uk"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"> <link rel="stylesheet" href="https://api.visicom.ua/apps/visicom-autocomplete.min.css"> </head> <body> <div id="visicom-autocomplete"> <a href="https://api.visicom.ua/" target="_blank">© Visicom</a> </div> <div id="map" style="width: 800px; height: 400px;"></div> </body> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script> <script type="text/javascript" src="https://api.visicom.ua/apps/visicom-autocomplete.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { let map = new L.Map('map', { center: new L.LatLng(50.455002, 30.511284), zoom: 9, layers: [ new L.TileLayer( // paste below your private API key in key parameter 'https://tms{s}.visicom.ua/2.0.0/planet3/base_ru/{z}/{x}/{y}.png?key=API_KEY', { maxZoom: 19, tms: true, attribution: 'Данные карт © 2019 ЧАО «Визиком»', subdomains: '123' } ) ] }); let ac = new visicomAutoComplete({ selector: '#visicom-autocomplete', apiKey: 'YOUR_API_KEY', placeholder: 'Search your places...', minChars: 3, delay: 150, width: '400px', height: '35px', map: map, suggestsLimit: 5, includeCategories : [], excludeCategories : [], maxCharsInSuggest: 55, lang: 'local', onSuggestSelected: suggest => console.log('Suggest selected: ' + (suggest.html)), customFeatures: [{ html: 'наша фирма', keywords: 'киев вербицкого наша фирма', coords: [50, 30], }, { html: 'тестовый вариант', keywords: 'чернигов шевченко 23', coords: [50.46537, 30.48019], }], }); }); </script> </html> </code></pre> <h4>Результат</h4> <p><img src="/media/autocomplete.gif" alt="Visicom-autocomplete" /></p> </main> </div> <div id="footer-wrp"> <article class="spell-info"> Знайшли помилку в тексті? Виділіть її та натисніть Ctrl+Enter </article> <article class="social"> <section> <p>Залишайтесь на зв'язку</p> <ul> <li><a href="https://www.facebook.com/mapsvisicom" class="facebook" target="balank"></a></li><li><a href="https://www.linkedin.com/company/visicom/" class="linkedin" target="balank"></a></li> </ul> </section> </article> <footer> <div class="column1"> <section> <div class="logo uk gray"> <a href="https://api.visicom.ua"></a> </div> </section> <section> <nav> <ul> <li><a href="https://api.visicom.ua/uk/company">Про нас</a></li> <li><a href="https://api.visicom.ua/uk/docs/copyright">Заява про авторські права</a></li> <li><a href="https://api.visicom.ua/uk/docs/privacy">Політика конфіденційності</a></li> </ul> </nav> </section> <section> <nav> <ul> <li><a href="https://visicomdata.com">Продаж даних</a></li> <li><a href="https://maps.visicom.ua?lang=uk">Веб-карта</a></li> </ul> </nav> </section> </div> <div class="column2"> <section class="address"> <a href="https://maps.visicom.ua/c/30.51128,50.45485,17/f/POIA1KIGKN">01001, Україна, Київ, вул. Велика Житомирська, 25/2</a><br> +380 44 201-00-26 <a href="mailto:web-maps@visi.com.ua">web-maps@visi.com.ua</a><br/> © 2024, АТ «Візіком» </section> <section class="apiversion"> <ul> <li>API database timestamp 2024-11-23 23:30:44</li> <li>Data API engine version 5.0.1040</li> </ul> </section> </div> </footer> </div> <script> var calendarYear = new Date().getFullYear(); var basepath = 'https://api.visicom.ua'; var lang = 'uk'; var signInMsg = 'Увійти'; var siteAccountsUrl = 'https://api.visicom.ua/accounts' + '/'; var siteMapsUrl = 'https://maps.visicom.ua'; var dapiUrl = 'https://api.visicom.ua'; var autocomlete_placeholder = 'Шукати місця, адреси...'; var langs = []; langs.push('uk'); langs.push('en'); </script> <script src="https://api.visicom.ua/wro/pub.js?minimize=false&1722258568000" defer></script> </div> </body> </html>