JavaScript:Google Maps APIで2点間の距離計測とマーカー表示方法
テーマ：JavaScriptGoogleマップサンプル集
もいよいよ大詰め。
クリックすると2点間の距離を測定し、また、マーカーのアイコンの変更を行って地図に書き込む。
作成したHTML文書はこちら
。
以下にソースの説明をしていきます。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google map</title>
<script src="http://maps.google.com/maps? file=api&v=2&sensor=false&key=
ABQIAAAAJXYwFgs3R54rlXBVQrZ-
QRSQX0zcyHiuBBtvLf60RI8qT6jGRBQ
Gp1BCIcxnSAnD57RevlOVEHHbMQ"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
var x = 35.186225462776335;
var y = 136.8989610671997;
var z = 13;
map.setCenter(new GLatLng(x, y), z);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var point = new GLatLng(x, y);
map.addOverlay(new GMarker(point));
map.openInfoWindow(point,document.createTextNode("名古屋の中心名古屋城"));
var ICONS = [];
var icon = new GIcon();
icon.image = "hata.gif";
icon.iconAnchor = new GPoint(16, 16);
icon.infoWindowAnchor = new GPoint(16, 0);
icon.iconSize = new GSize(26, 24);
ICONS[0]=icon;
↑
マーカーのアイコンの設定。icon.iconAnchorでマーカー表示するときの位置を設定する。
icon.iconAnchorは設定しておかないと表示されない。
icon.iconWindowAnchorで情報ウィンドウの位置を指定。なくても問題ない。
icon.iconSizeでアイコンのサイズを設定。
ICONS[0]はアイコンを複数登録したいため配列にした。
GEvent.addListener(map,"click", function(overlay,latlng) {
if (overlay) {
// ignore if we click on the info window
return;
}
var polyline = new GPolyline([
new GLatLng(x,y),
new GLatLng(latlng.lat(),latlng.lng())
], "#ff0000", 10, 1);
↑
GPolyline([],a,b,c)の[]で2点間の距離をmで測定してくれる。
後のa,b,cは2点間を結ぶ線の設定。
map.addOverlayで2点間の線を表示させることができるが、今回は表示しない。
var value = polyline.getLength();
value = value / 1000;
var myHtml = "緯度:"+latlng.lat()+"<br/>経度: "+latlng.lng()+"<br/>名古屋城からの距離:"+value+"km";
map.openInfoWindow(latlng, myHtml);
map.addOverlay(new GMarker(latlng, { icon: ICONS[0] }));
↑
マーカーを追加するが、iconは設定したICON[0]で表示する。
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<p id=aa>a</p>
<p id=bb>b</p>
</body>
</html>
だいぶGoogle Maps API リファレンス
にも慣れてきた。
サンプル集とAPIリファレンスがあるので、初心者の私でも理解しやすい。
初めてAPIという代物に挑戦するにはGoogleマップがやっていて面白くて理解しやすいのではないかと思う。
ここまできたら、位置ゲーもどきを作って、Googleマップは終了しよう。
次のAPIを攻略しよう。
詳細はこちらに記載しました。
http://www.d3.dion.ne.jp/~jkondou/javascript/5.htm
PS.
宝探しゲームを作成したが、なかなか好評にならない。
http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.htm
暇だったので、ドラクエ9をやってみたが、作業の繰り返しで疲れる。
だが、作業をやり終えた時の達成感はある。
特に、ラスボスが急に強くなり、レベル上げとお金稼ぎが必要となって、はぐれメタル狩りで全員にパラディンのスキル100と、錬金でのゴールド稼ぎでドラゴンメイル、水のはごろもを装備させたら、受けるダメージは1程度、こちらの攻撃は200以上と一方的に倒すことができて楽しかった。
後はクエストと宝の地図だが、結構面倒だが全クリアを目指している。
1週1問づつ増やして、ステータスで達成履歴でもつけてみるか。
