touchmoveイベントでの緯度・経度取得

[seikoudoku2000]

はじめまして、冨田陽介(@seikoudoku2000)といいます。

早速ですが、質問があります。
iphoneなどのsmartphone上のブラウザにmapを「draggble=false」で表示した状態で、
touchmoveイベントを検出してその軌跡の緯度、経度を取得する方法はあるでしょうか？

↓ＰＣブラウザのmousemoveでこんな感じでできることを、touchmoveに置き換えてやりたいです。
---
google.maps.event.addListener(map, "mousemove", function(event)
{alert(event.latLng.lat());alert(event.latLng.lng());});
---

google mapのAPIを使って、yahooのyubichizの指で線を引いての周辺検索ようなことがしたいなと思い、
色々と調べていて、そこで行き詰ってしまいました。

ヒントになりそうな情報だけでもいいので、ご存知の方がいらっしゃる場合は、何かご教授いただければ幸いです。
よろしくお願いします。

[KF]

多分、以下のグーグルマップ上に落書きするサンプルが役立つかもしれませんが、iPhone 4/iPadで試したら画面全体が動いてしまって駄目でし
た。
（パソコン上のブラウザでIE以外なら動作します。IE9以前でExplorerCanvasを利用して場合にうまくいくかどうかは試していません）
何かイベント絡みで処理すればよいのでしょうけど、ちょっと分かりませんでした。解決できたら、ここに投稿してもらえばよいかと思います。

http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/map/1000/index.html

[seikoudoku2000]

↓このサイトの内容を元に概ねやりたいことはできるようになりました。
http://www.mwsoft.jp/programming/googlemap/google_map_v3_custom_overlay.html

ただ、オーバーライドすべき関数として、onAdd( )というものが追加になったようで、
現在のAPI定義とは少し違いがありましたので合わせて記載しておきます。
http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView

コードの抜粋としてはこんな感じです。
## 色々と汚いコードですが、とりあえずiPad上でそれらしい動きは確認できました。
-------
//draggable=falseの地図を作成
//touchmoveとdragを共存させるためにはyubichizのようなモード切り替えが必要か？
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

// マーカー生成。lat,lngは地図のセンターと合わせる。
var marker = new HelloMarker( map, lat, lng);

//mousemoveとtouchmoveで同じ関数を利用
document.addEventListener("mousemove", moveFunc);
document.addEventListener("touchmove", moveFunc);

function moveFunc(event){
if (event != null) {
var latLng = marker.getLatLng(event.x,event.y);
alert(latLng.lat());
alert(latLng.lng());
}
}

/** google.maps.OverlayViewを継承し、css上の座標と緯度経度の変換処理を行うためのクラス */
function HelloMarker (map, lat, lng) {
this.lat_ = lat;
this.lng_ = lng;
this.setMap(map);
}

/** google.maps.OverlayViewを継承 */
HelloMarker.prototype = new google.maps.OverlayView();


HelloMarker.prototype.onAdd = function() {
// 出力したい要素生成
this.div_ = document.createElement( "div" );
this.div_.style.position = "absolute";
/*
this.div_.style.fontSize = "200%";
this.div_.innerHTML = "hello!!!";
*/
// 要素を追加する子を取得
var panes = this.getPanes();
// 要素追加
panes.overlayLayer.appendChild( this.div_ );
}

/** drawの実装。hello, worldと書いたdiv要素を生成 */
HelloMarker.prototype.draw = function() {
// 緯度、軽度の情報を、Pixel（google.maps.Point）に変換
var point = this.getProjection().fromLatLngToDivPixel( new
google.maps.LatLng( this.lat_, this.lng_ ) );
// 取得したPixel情報の座標に、要素の位置を設定
this.div_.style.left = point.x + 'px';
this.div_.style.top = point.y + 'px';
}

/* 削除処理の実装 */
HelloMarker.prototype.onRemove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
}


/* lat,lngからxy座標の位置を取得 */
HelloMarker.prototype.getXY = function(lat, lng) {
var point = this.getProjection().fromLatLngToDivPixel(new
google.maps.LatLng(lat, lng));
return point;
//this.div_.style.left = point.x + 'px';
//this.div_.style.top = point.y + 'px';
}

/* xy座標から緯度経度を取得 */
HelloMarker.prototype.getLatLng = function(x, y) {
var latlng = this.getProjection().fromDivPixelToLatLng(new
google.maps.Point(x, y));
return latlng;
//this.lat_ = latlng.lat();
//this.lng_ = latlng.lng();
}
-------

> http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/map/1000...