メインコンテンツまでスキップ

Mapbox Search JS

現在のバージョン:v1.0.0-beta.22

  • check
    チェックアウトのUXを向上させる
  • check
    インタラクティブな場所検索
  • check
    住所フォームの自動入力
  • check
    フルカスタマイズ可能
Public beta for Mapbox Search JS
Mapbox Search JS はパブリック ベータ版です。パブリック ベータ段階では、フレームワークが安定するにつれて変更される可能性があります。

Mapbox Search JSは、Mapbox Search Serviceを使用してインタラクティブな場所検索エクスペリエンスを構築するためのクライアントサイドJavaScriptライブラリのセットです。Mapbox Search JSを使用してWebブラウザに住所の自動入力機能を追加したり、Mapbox GL JSマップに検索ボックスを追加したり、提案の座標をプログラムで取得したりすることができます。

  • 既存のHTML5 autocomplete タグと互換性があります
  • デザインシステムに合わせてフレキシブルにテーマ設定可能
  • アクセシビリティ最優先(ARIA)、モバイルとデスクトップのネイティブ
  • Google Tag Manager、HTMLカスタム要素、Reactに対する一流のサポート
すぐにはじめてみましょう!

Mapbox Search JSの3つの主要な機能用のクイックスタートガイドが用意されています。

機能

Mapbox Search JSには、Address AutofillSearch Box、およびGeocodingの3つの主要な機能が含まれています。WebおよびReactプロジェクトで使用する際に、Search JSは豊富なインタラクティブなUIコンポーネントを提供します。また、Search JS Coreフレームワークを使用してこれらの機能用の独自のUIを構築することもできます。

ユースケース

Mapbox Search JSのユースケースには以下が含まれます:

  • 顧客のコンバージョン率向上のための住所の自動入力
  • 住所の検証と配送先の確認
  • マップを制御するためのインタラクティブな検索体験
  • Web、Node.js、React Nativeを通じて検索APIとインターフェースを接続

Mapbox Search JSでできることについてのさらなるインスピレーションは、チュートリアル、およびMapboxの顧客ショーケースページを参照してください。

構造

Mapbox Search JSには3つのフレームワークが含まれています。それぞれが@mapboxネームスペースの下で個別のパッケージとしてnpmで公開されています:

Search JS WebとSearch JS Coreは、Mapbox CDNを介して<script>タグを使用して組み込むこともできます。

Search JS Web

Search JS WebはMapbox Search JSのメインエントリーポイントであり、Search JS Coreの上に豊富なUIコンポーネントを提供します。

これらはHTMLカスタム要素として定義されており、<button><input>などのビルトインと同じ忠実度を持っています。Web Quickstart Guides:

基本を理解したら、Webリファレンスで詳細なドキュメントを探索してください。

Search JS React

Search JS ReactはReactで豊富なUIコンポーネントを提供し、Search JS Webの上に構築されています。これは大規模なアプリケーションにおいてMapbox Search JSの推奨エントリーポイントです。

React Quickstart Guides:

基本を理解したら、Reactリファレンスで詳細なドキュメントを探索してください。

Search JS Core

Search JS CoreはMapbox Search Serviceのための高レベルフレームワークを提供します。このフレームワークはAPIに対して強力なタイプ定義を提供し、リクエスト/レスポンスを自動的に処理し、セッショントークンを管理することができます。

Coreフレームワークのクラスを使用して、独自の位置検索や住所の自動入力用の実装とUIを構築することができます。

Search JS CoreはSearch JS Webやその他のフレームワークで消費されます。Web技術に依存していないため、ほとんどのJavaScript環境で使用できます。Web、Node.js、React Nativeの公式サポートを提供しています。

Coreリファレンスで詳細なドキュメントを探索してください。

このpageは役に立ちましたか?