Googleマップ2

六帖webアプリ
kickzone/TrainNavi2 · GitHub
連携できるようになった。まず一番面食らったのは、自作の路線図の縮尺が全然合っていなかったということ。いくら倍率を揃えても地図と重ならないので、仕方なく、googleマップに合わせて路線を描画するようにした。
さらに面倒だったのは、ローカルの座標とgoogleマップ上の緯度・経度の変換方法がややこしいということ。googleマップには緯度・経度を座標に変換できるAPIが存在するが、得られる座標は、なんと全世界単位の座標だ。これをローカルの地図に合わせて変換する必要がある。次のようにする。

//緯度経度からローカル座標に変換
function fromLatLngToPoint(latLng, map) {
	//表示中の地図の世界座標をゲット
	var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
	var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
	//倍率
	var scale = Math.pow(2, map.getZoom());
	//与えられたlatLngの世界座標をゲット
	var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
	//地図の世界座標と画面上の世界座標の差を、倍率でかけて出来上がり
	return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
}
//ローカル座標から緯度経度に変換
function fromPointToLatLng(point, map) {
	//表示中の地図の世界座標をゲット
	var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
	var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
	//倍率
	var scale = Math.pow(2, map.getZoom());
	//地図の左上の座標にローカル座標を倍率を考慮して足し、世界座標を得る
	var worldPoint = new google.maps.Point(bottomLeft.x + point.x / scale, topRight.y + point.y / scale);
	//緯度経度に変換
	var latlng = map.getProjection().fromPointToLatLng(worldPoint);
	return latlng;
}

Googleマップと重ねてみると、今の路線図は概略にすぎず山の中を走ったり建物の中を突っ切ったり散々な状態であることが分かった。途中経路を表すhalfwayを作成し、綺麗な路線を作ることが急務となった。