この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは。モバイルアプリサービス部の平屋です。
前回の記事「MapKit JSを使用してWebページ上に地図を表示する」に引き続き、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] 地図を表示する (ここから)-->
<script src="https://cdn.apple-mapkit.com/mk/5.0.x/mapkit.js"></script>
</head>
<body>
<div id="map" style="height: 600px; width: 600px;"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
done("<Your Token>");
}
});
var map = new mapkit.Map("map");
// [1] 地図を表示する (ここまで)
// [2] 注釈を作成する
var coordinate1 = new mapkit.Coordinate(35.6811673, 139.7670516)
var annotation1 = new mapkit.MarkerAnnotation(coordinate1);
annotation1.title = "Tokyo Station";
var coordinate2 = new mapkit.Coordinate(35.6973139, 139.7746914)
var annotation2 = new mapkit.MarkerAnnotation(coordinate2);
annotation2.title = "Classmethod";
// [3] 注釈をクリックしたときの処理を追加する
var calloutDelegate1 = {
calloutRightAccessoryForAnnotation: function() {
var accessoryViewRight = document.createElement("a");
accessoryViewRight.className = "right-accessory-view";
accessoryViewRight.href = "http://www.tokyoinfo.com/";
accessoryViewRight.target = "_blank";
accessoryViewRight.appendChild(document.createTextNode("ⓘ"));
return accessoryViewRight;
}
};
annotation1.callout = calloutDelegate1;
var calloutDelegate2 = {
calloutRightAccessoryForAnnotation: function() {
var accessoryViewRight = document.createElement("a");
accessoryViewRight.className = "right-accessory-view";
accessoryViewRight.href = "https://classmethod.jp/";
accessoryViewRight.target = "_blank";
accessoryViewRight.appendChild(document.createTextNode("ⓘ"));
return accessoryViewRight;
}
};
annotation2.callout = calloutDelegate2;
// [4] 地図に注釈(マーカー)を追加する
map.showItems([annotation1, annotation2]);
</script>
</body>
</html>[1] 地図を表示する
前回の記事と同様の実装で地図を表示します。
[2] 注釈を作成する
MarkerAnnotation()メソッドを使用して注釈を作成します。
[3] 注釈をクリックしたときの処理を追加する
注釈をクリックしたときの処理を定義し、MarkerAnnotationのcalloutプロパティを設定します。
今回は注釈をクリックしたときに表示される吹き出しの右側に文字列「ⓘ」を追加しました。「ⓘ」をクリックすると特定ページを開きます。
[4] 地図に注釈を追加する
最後に、showItems()メソッドを使用して地図に注釈を追加します。
さいごに
本記事では地図にマーカーを表示する実装を紹介しました。
これからMapKit JSを触ってみようと思っている方の参考になれば幸いです。
6
