---
# System prepended metadata

title: 【A講座】Webプログラミング講座6回目

---

# 【A講座】Webプログラミング講座6回目
## 初期準備
Teams上にアップロードした資料をシンクライアント上にダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。
今日の授業で使うのは「06_js」というフォルダです。
このフォルダをVsCodeで開いた状態で授業に進んでいきます。

本日使う授業フォルダに入っているもの。
```
geolocation_string.html
js/BmapQuery.js
js/jquery-2.1.3.min.js
```
今日の授業では06_jsフォルダ内の各htmlファイルを開いて作業していきます。

Bingmapsを書きやすくする為のライブラリ
https://mapapi.org/indexb.php

## セクション１　BingMapsのアカウント取得〜api keyを取得
### 1-1 こちらのURLにアクセスしてサインイン
https://www.bingmapsportal.com/

### 1-2 アカウント登録（資料P41~）

### 1-3 API key取得
画面上部：「My account」の中「My keys」をクリック
Create keyから新規アプリケーションを作成します。
```
アプリケーション名：自由な英字
アプリケーションURL:空欄でOK
Keytype:Basic
アプリケーションType:Dev/Test
```
### 1-4　以下のリンク方BingMapsの公式ドキュメントを開く
https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk

### 1-5 Getting Stratedのタブでベーシックな機能を知る

### 1-6 Servicesのタブの中のDirections Moduleを開く
Show input panelでは出発地点と到着地点からルート検索ができたりする。
ソースコードも記載されているのでこれを活用もできます。


## セクション2　実際にBingMapsAPIを使ってみよう
### 2-1 API keyを確認してコピー
Key detaisの部分のkeyに書かれているランダムな文字列があなた固有のAPIkeyです。
show keyで表示しましょう！
コピーしておきましょう。

### 2-2 geolocation_string.htmlの26行目の部分のコードを先程の自分のAPIkeyに書き換え
＊必ず自分のAPIkeyを書いてください。
`<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[xxxxx ここにapikeyを貼り付けます！少し動画の文字と違います🙋‍♀️]'`
↓↓↓↓
`<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=BgrtnN4MkiTRsu44yOqBfhu-wpEh-Xxnr4hGxREvtfjDhHebFKQb4ry9PcebkZ5y'`

### 2-3 まずはGetMap関数を作成する
```
//****************************************
//最初に実行する関数
//****************************************
function GetMap() {
  navigator.geolocation.getCurrentPosition(mapsInit, mapsError, set);
}
```

### 2-4 位置情報の取得に成功したときの関数を作成する
```
//****************************************
//成功関数
//****************************************
let map;

function mapsInit(position) {
  //lat=緯度、lon=経度 を取得
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;

  //Map表示
  map = new Bmap("#myMap");
  map.startMap(lat, lon, "load", 25); //The place is Bellevue.
  //Pinを追加
  let pin = map.pin(lat, lon, "#ff0000");
  //Infoboxを追加
  map.infobox(lat, lon, "タイトル", "詳細情報を記載");
};
```

### 2-5 位置情報の取得に失敗した場合の関数を作成する
```
//****************************************
//失敗関数
//****************************************
function mapsError(error) {
  let e = "";
  if (error.code == 1) { //1＝位置情報取得が許可されてない（ブラウザの設定）
    e = "位置情報が許可されてません";
  }
  if (error.code == 2) { //2＝現在地を特定できない
    e = "現在位置を特定できません";
  }
  if (error.code == 3) { //3＝位置情報を取得する前にタイムアウトになった場合
    e = "位置情報を取得する前にタイムアウトになりました";
  }
  alert("エラー：" + e);
};
```

### 2-6 Map作成時のオプションを設定する
```
//****************************************
//オプション設定
//****************************************
const set = {
  enableHighAccuracy: true, //より高精度な位置を求める
  maximumAge: 20000, //最後の現在地情報取得が20秒以内であればその情報を再利用する設定
  timeout: 10000 //10秒以内に現在地情報を取得できなければ、処理を終了
};
```

