0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

チーム開発に必要だったbing map でピン表示までやってみた

Last updated at Posted at 2020-12-20

ECサイト構築宣言から急にMapの話に飛びました。w
でもチーム開発用に必要だったのとつまづきまくったので記事にしました。

おそらくプログラミングの流れや情報の受け渡し、
データの読まれ方の順序などを把握している方はつまづかないポイントかも
しれませんが、同じように写経がメインであまり理解が進んでない
誰かのためになればと思い投稿します。

やったこと:
・bing map api キーを取得する
・自分のキーを使ってマップを表示する
・表示したマップに緯度経度を指定してピンを表示する

スクリーンショット 2020-12-20 12.03.48.png
スクリーンショット 2020-12-20 12.04.00.png
スクリーンショット 2020-12-20 12.04.27.png

上からコードが読まれていくので、

ズームの拡大縮尺やタイムアウトを何秒にするかの設定(const = set)

何色のピンをどこに表示する?の表示の宣言(pushPin(lat, lng, map))

マップ表示の宣言(mapsInit)
---この関数の中で「ピンをマップ上に表示するためpushPinを宣言」

エラーが起きた際の表示(mapsError)

mapsInit, mapsError, set を全て実行する関数を定義(GetMap)

最後、window.onload でGetMapを宣言し実行

これで現在地のマップ表示とピン表示ができました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?