質問：マップ内の座標取得について

[land of hypothesis]

皆様こんにちは、hypoと申します。

Google MapsではなくJavaScriptのクロスブラウザの問題なのかも知れませんが、お心当たりのある方いらっしゃいましたらお知恵を拝借したいと思います。


冬場だけ運営している地図サイトで、オリジナルのマーカーを表示しておき、その地点にマウスカーソルを乗せると情報ウインドウが開くようにしています。V3を使用しています。

今年の4月には問題なく動いていたのですが、今日動作確認をしてみると思うように動かなくなっていました。

当該部分は次のようになっています。（x、y座標を取得、前後は割愛）


google.maps.event.addListener(point, 'mouseover', function(e){
    var x, y;
    if (document.all) {
        x = e.clientX + document.body.scrollLeft;
        y = e.clientY + document.body.scrollTop;
    } else {
        x = e.pageX;
        y = e.pageY;
    };
})


このうち、前半分（IEの場合）は、

    x = event.x + document.body.scrollLeft;
    y = event.y + document.body.scrollTop;

と修正したことでほぼ動作しましたが、後半分は取得できないままです。


なにか手はありますでしょうか？
よろしくお願いします。

[Masashi.K]

hypoさん

クリックされた位置のページでの絶対座標が分かればいいのでしょうか？

2011/9/28 land of hypothesis <hypot...@gmail.com>:

> --
> このメールは Google グループのグループ「Google-Maps-API-Japan」の登録者に送られています。
> このグループに投稿するには、google-map...@googlegroups.com にメールを送信してください。
> このグループから退会するには、google-maps-api-...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/google-maps-api-japan?hl=ja
> からこのグループにアクセスしてください。
>

[Masashi.K]

hypoさん

ごめんなさい、読み違えてました。

マーカーの上にマウスが来たときに情報ウィンドウを開くだけなら、私ならこうします。
-----------------------
var marker = new google.maps.Marker({
position : point,
map : mapCanvas
});
google.maps.event.addListener(marker, "mouseover", function(){
var infoWnd = new google.maps.InfoWindow({
content : "Hello"
};
infoWnd.open(mapCanvas, marker);
});

-----------------------

On 9月28日, 午後9:47, "Masashi.K" <wf9a5...@gmail.com> wrote:
> hypoさん
>
> クリックされた位置のページでの絶対座標が分かればいいのでしょうか？
>

> 2011/9/28 land of hypothesis <hypothe...@gmail.com>:

[Masashi.K]

hypoさん

ちゃんと計算するなら、こんな感じです。
----------
var marker = createMarker(map, point, "Hello");
google.maps.event.addListener(marker, "mouseover", function(mouseEvt)
{
var latLngChoord = projection.fromLatLngToPoint(mouseEvt.latLng);
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var nwChoord = projection.fromLatLngToPoint(nw);
var world = Math.pow(2, map.getZoom());
var x = (latLngChoord.x - nwChoord.x) * world;
var y = (latLngChoord.y - nwChoord.y) * world;
console.log(x, y);
});
----------

[Masashi.K]

おっと、ページ座標で欲しいんでしたね
----------------------------------

var marker = createMarker(map, point, "Hello");
google.maps.event.addListener(marker, "mouseover", function(mouseEvt)
{
var latLngChoord = projection.fromLatLngToPoint(mouseEvt.latLng);
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var nwChoord = projection.fromLatLngToPoint(nw);
var world = Math.pow(2, map.getZoom());
var x = (latLngChoord.x - nwChoord.x) * world;
var y = (latLngChoord.y - nwChoord.y) * world;

console.log(x, y); //地図内での座標位置

x += mapDiv.offsetLeft;
y += mapDiv.offsetTop;
console.log(x, y); //ページ内での座標位置
});
--------------------------------------

[Masashi.K]

座標変換のサンプルを遊びで作ってみました

http://googlemaps.googlermania.com/google_maps_api_v3/map_example_markerposition.html

[hypothesia]

Masashi.Kさん
短時間のうちにここまで作っていただいて、ありがとうございます。（感動します）

そもそもの話はもっと単純で、「去年使えていたclientX・Y、pageX・Yが使えな
くなったのはなぜだろう？」というものでしたが、教えていただいた方法で少し
別のやり方を考えてみる気になりました。

ありがとうございます！

--
SP Planner / Copy Writer
yutaka Haya-G hayasaka
Hassamu, Sapporo
Mobile : 090-8728-0159
www.steeps.jp