iphone safariとYOLP地図

javascript geolocation yolp

先日2010/03/30にYJDNよりYOLPが公開された。
Yahoo! Open Local Platformの略
YOLP(地図):Yahoo! JavaScriptマップAPI - Yahoo!デベロッパーネットワーク

ということで早速使ってみる。

とりあえず地図を表示するに載ってるサンプルコードをこぴぺ。

地図はでました。iphoneでも地図が出ますし、地図をスクロールできます。


しかしマルチタッチイベントで縮尺をかえることはできませんでした。

そこで実装してみることにする。

マルチタッチイベントに関しては
Resources - Safari - Apple Developer
こちらのappleのリファレンスを参照。

要するに
gesture系のイベントを使えばマルチタッチイベントを拾うことができる。

縮尺の拡大縮小を判別するのにはevent.scaleを用いる。
縮小動作を行った場合、scaleが1未満。
拡大動作を行った場合、scaleが1以上。

それだけじゃおもしろくないので
前エントリーのwatchPositionを使ってロギングしてみる。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    </head>
    <body style="width:320px">
        <div id="map" style="width:320px; height:480px"></div>
    </body>
    <script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【APPID】"></script>

  <script type="text/javascript">
//mapのインスタンス生成
      var ymap = new Y.Map("map");
     window.onload = function() {
        var z=15;
//mapを描画
        ymap.drawMap( 
new Y.LatLng(35.662484, 139.734222),
 z , Y.LayerSetId.NORMAL );
//現在地の緯度経度を取得
        var watchId = navigator.geolocation.watchPosition(function(pos){
                if (pos.coords.accuracy < 100) {
//markerを作成
                var mark = new Y.Marker(
                    new Y.LatLng(pos.coords.latitude,pos.coords.longitude)
                    );
//地図にmarkerをセット
                ymap.addFeature(mark);
                }
                },
                function(error){},
                {
enableHighAccuracy:true,
timeout:1000,
maximumAge:0
});
     }
function gestureEnd(event){
    event.preventDefault();
   // var center=ymap.getCenter();
    var scale = event.scale;
    if(event.scale < 1.0) {
        //zoomout
        ymap.zoomOut(null,true);
    } else {
        //zoomin
        ymap.zoomIn(null,true);
    }
}
var mapDom = document.getElementById('map');
mapDom.addEventListener("gestureend", gestureEnd, false);
    </script>
</html>

ジェスチャーイベントで欲しいのは、拡大なのか縮小なのかだけなので

mapDom.addEventListener("gestureend", gestureEnd, false);

ジェスチャーの終了イベントを用いる。

実行結果をお見せすると
自宅がばれてしまうので、控えますが、
家の周りを歩いた結果、それなりの精度でマーカーが軌跡を描きますし、
地図の拡大、縮小も二本指の拡大、縮小ジェスチャーに応じて、動作しました。

これだけできるとiphoneアプリじゃなくても
ある程度のことはできそうですね。