この記事では主に次の内容を紹介します。 Web ページに Baidu マップを埋め込み、Baidu Maps API を使用してマップをカスタマイズするための詳細な手順
1. まず、以下の図 1 に示すように、Baidu Map を見つけてマップ オープン プラットフォームを開きます。
図 1 Baidu マップ --> マップ オープン プラットフォーム
2. ナビゲーション バーの [開発] を選択し、対応するナビゲーション サブメニューを選択します この記事では Web 開発を例にしているため、Web 開発用の [ JavaScript API ]を選択します。
図 2 JavaScript API の選択
3. 初めて使用する場合は、最初にキーを取得する必要があります。このキーは無料です。
図 3 キーの取得
4. クリックしてキーを取得すると、以下の図 4 に示すようにアプリケーションを作成できます。
図 4 アプリケーションの作成
5. アプリケーションを作成し、対応する内容を入力し、[送信] をクリックして無料キーを取得します。
図 5 コンテンツを入力して無料キーを取得する
6. キーを取得したら、キーを使用してマップを接続できます。キーを申請したページに戻ります。次の機能マップのいずれかをクリックして、マップ編集ページに入ることができます。
図 6 Baidu Map 開発者向けオプション
7. 図 7 に示すように、編集ページに入ります。
- 左側のメニュー ナビゲーション バーにはさまざまな機能オプションがあり、この例では地図サンプルが選択されています --> 地図表示
- 中央の列は編集コードです
- 右列はマップ表示効果です
プロジェクトの必要に応じて左側の機能メニューを選択し、対応するコードをコピーします (図 7 の赤枠内にコードを記述する必要があります)。プロジェクトの必要に応じて変更してください。
図7 マップ編集ページ
8. 別の例として、マップを非同期でロードする場合、変更が必要な場所は、赤いボックスに対応する場所でもあります。
図 8 非同期マップのロード
9. この例では、マップ表示と非同期マップ読み込みを組み合わせて使用しています。コード参照は図 9 に示すとおりです。
図 9 コードへのマップ
10. 最終レンダリング
図 10 最終的なレンダリング