この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは。モバイルアプリサービス部の平屋です。
前回の記事「MapKit JSを使用するために必要な作業について」に引き続き、WWDC18で発表されたMapKit JSを扱います。
本記事では地図を表示する実装を紹介します。
本記事は Apple からベータ版として公開されているドキュメントを情報源としています。 そのため、正式版と異なる情報になる可能性があります。ご留意の上、お読みください。
検証環境
本記事は以下の環境で検証を行っています。
- macOS Sierra 10.13.5
- Google Chrome Version 67.0.3396.87
実装
さっそく実装を紹介していきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- [1] MapKit JSのスクリプトを埋め込む -->
<script src="https://cdn.apple-mapkit.com/mk/5.0.x/mapkit.js"></script>
</head>
<body>
<!-- [2] 地図用のコンテナを作成する -->
<div id="map" style="height: 600px; width: 600px;"></div>
<script>
// [3] MapKit JSを初期化する
mapkit.init({
authorizationCallback: function(done) {
done("<Your Token>");
}
});
// [4] Mapオブジェクトを作成する
var map = new mapkit.Map("map");
// [5] 地図の表示範囲を指定する
var tokyo = new mapkit.CoordinateRegion(
new mapkit.Coordinate(35.6811673, 139.7670516),
new mapkit.CoordinateSpan(0.04, 0.04)
);
map.region = tokyo;
</script>
</body>
</html>[1] MapKit JSのスクリプトを埋め込む
scriptタグを追加してスクリプトを埋め込みます。
[2] 地図用のコンテナを作成する
divタグを追加して地図用のコンテナを作成します。idは[4]で指定するものと同じidを指定します。
[3] MapKit JSを初期化する
initメソッドを使用して初期化処理を行います。authorizationCallback内で、前回の記事で作成したAuthorization Tokenを渡します。
[4] Mapオブジェクトを作成する
idを指定してMapオブジェクトを作成します。
[5] 地図の表示範囲を指定する
Regionを地図に設定して、表示範囲を指定します。
さいごに
本記事では地図を表示する実装を紹介しました。
次の記事では地図上に注釈(マーカー)を表示する実装を紹介します!
6
