« Google EarthのウェブAPIを使ってみた車載PCメンテ »

第15回高蔵寺SE勉強会

第15回高蔵寺SE勉強会

パーマリンク 2008/10/19 23:59:30 著者: kumaold メール
カテゴリ: 仕事, 勉強会など

本日は第15回高蔵寺SE勉強会を開催しました。

 

1. 宿題

今回の宿題は、久々にJavaScriptです。多分2ヶ月ぶりくらい

◆上級者用

この場所の裏側はどこ?

[言語]JavaScript・PHP
[お題]
GoogleMaps上の任意の位置をクリックすると、その場所の地球の裏側の地図を表示するようにしてください。


実装の方法とか表示方法は自由なので、できるだけ画面遷移がないようにと考えた結果、1画面で2マップ表示させるということに落ち着きました。


できたものはこちら「地球の裏側を表示@GoogleMap

ソースを直接見てもらった方が早いんですが、一部を抜粋しときます。

//左マップの初期設定
var map1 = new GMap(document.getElementById("map1"));
map1.addControl(new GLargeMapControl());
map1.addControl(new GMapTypeControl());
map1.centerAndZoom(new GPoint(137.385, 35.694), 14);
document.getElementById("map1x").innerHTML = 137.385;
document.getElementById("map1y").innerHTML = 35.694;

//右マップの初期設定
var map2 = new GMap(document.getElementById("map2"));
map2.addControl(new GLargeMapControl());
map2.addControl(new GMapTypeControl());
map2.centerAndZoom(new GPoint(-42.615, -35.694), 14);
document.getElementById("map2x").innerHTML = -42.615;
document.getElementById("map2y").innerHTML = -35.694;

//左マップがクリックされたらgetPoint()を呼び出す
GEvent.addListener(map1, "click", getPoint);

function getPoint (overlay, point) {
    //左マップにマーカー作成
    map1.clearOverlays();
    var point1 = new GPoint(point.x, point.y);
    var marker = new GMarker(point1);
    map1.addOverlay(marker);
    
    //左マップの座標を小数点以下3桁で表示
    document.getElementById("map1y").innerHTML = point.y.toFixed(3);
    document.getElementById("map1x").innerHTML = point.x.toFixed(3);
    
    //地球裏側の座標取得
    reversePoint(point);
    
    //右マップを移動させ、新たにマーカーを作成
    map2.clearOverlays();
    map2.recenterOrPanToLatLng(new GPoint(point.x, point.y));
    var point2 = new GPoint(point.x, point.y);
    var marker = new GMarker(point2);
    map2.addOverlay(marker);
    
    //左マップの座標を小数点以下3桁で表示
    document.getElementById("map2y").innerHTML = point.y.toFixed(3);
    document.getElementById("map2x").innerHTML = (point.x).toFixed(3);
}

//地球裏側の座標計算
function reversePoint (point) {
    //東経0~180度
    if (point.x >= 0) {
        point.x = -(180 - point.x);
    //西経0~180度
    } else if (point.x < 0) {
        point.x = (180 + point.x)
    }
    
    //緯度は単に反転
    point.y = -point.y;
}


まあ小細工が色々してあるだけで特に解説不要かと思いますが。

他の方の発表とか見ていると、いろんな表示の仕方があるんだなぁと思いました。

2. 開発
BakeSaleを触ってみよう

CakePHP1.2で開発された BakeSale を実際にインストールして、ソースを触りながら、技術を学んでいこう。


前回ソースコードリーディングをした Bakesale を実際に導入しながら、動作を研究したりするはずだったのですが・・・

インストール作業に四苦八苦。時間をほとんど食い潰してしまいました。


そもそも動作環境がMySQLなのに、PostgreSQL環境で無理矢理動かそうと設定を変更したりSQL文を直したりしたのが間違いだったようで。

最初っからMySQLの自宅鯖上で動かしとけばよかったものを。

そんなわけで、ほとんど触れずじまいなわけでした。

type="text/javascript" src="http://www.ad16.jp/socailmedia.php?a=CCBot%2F2.0+%28http%3A%2F%2Fcommoncrawl.org%2Ffaq%2F%29&u=http%3A%2F%2Fkuroutoshikou.blog16.jp%2Findex.php%2F2008%2F10%2F19%2Fcnn15a_el_e_mamosea_afmaf" charset="EUC-JP">

一六社で働くITエンジニアのブログ。

普段はWeb系システム開発と地元のPCサポートをやってます。いつの間にやら会社に8年目。
技術ネタ中心に日々の仕事と生活と趣味やらを気が向いたら書いてます。

2017年4月
 << <   > >>
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

検索

XMLフィード

16ブログ     blogging software