Html5 canvasとgoogle maps apiで遊んでみた
-
Upload
shingo-mori -
Category
Documents
-
view
4.682 -
download
3
description
Transcript of Html5 canvasとgoogle maps apiで遊んでみた
HTML5 canvasと
Google Maps APIで遊んでみた
はてな Id:babydaemonsTwitter babydaemons
自己紹介
・ 35歳、妻一人、男の子一人 ・ 組込系・制御系から
オープン系・業務系までこなす ホントはWeb系がやりたいPG/SE
・ 中小企業ブラックから 中堅企業ブラックへ転職: →エイチームさんには落ちましたorz
・ Perfume “JPN”がマイブーム
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
Demo
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
今回使うのは: ・ Maps JavaScript API ・ Static Maps API
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
とても簡単。指定した<div>要素を
APIに渡すだけ。
var center = new google.maps.LatLng(35.700000, 137.000000);
var mapOptions = { zoom: 5, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map($("#map")[0], mapOptions);
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
こいつを使えばよいっぽい↓
MapCanvasProjectionクラス:
・ fromLatLngToDivPixel() ・ fromDivPixelToLatLng()
だけど、このインスタンスを取得する方法が判らない。orz
しょうがないのでググりましたwhttp://www.mwsoft.jp/
programming/googlemap/google_map_v3_custom_overlay.html
OverlayViewを継承して、
オレオレマーカーを作るしか無いっぽい。
function BoundsMarker(map, latLng) { this._latLng = latLng; this.setMap(map);}BoundsMarker.prototype = new google.maps.OverlayView();
オレオレマーカーのインスタンスを作れば、それから取得できる。
var projection = marker.getProjection();
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
今回使うのは: ・ Maps JavaScript API ・ Static Maps API
使用制限 ・ 1人の閲覧者が1日にリクエスト
できるユニークな(一意の)画像は1000 件まで!!
・ 24 時間内の制限を超えた場合や サービスを不正に使用した場合は一時的に機能しなくなる!!
・ 制限を超える日が続くと アクセスがブロックされる!!
エンドポイントにパラメータを指定してGETする: ・ sensor GPSから取得? ・ center 地図の中心座標
・ size 地図のサイズ(pixel) ・ zoom ズームレベル
...etc
http://maps.google.com/maps/api/staticmap
OverlayViewを継承して、
オレオレマーカーを作るしか無いっぽい。
var img = new Image();var url = endpoint + "?" + params.join("&");img.onload = function() { /* 画像取得後の処理 */ }img.url = url;
オレオレマーカーのインスタンスを作れば、それから取得できる。
var projection = marker.getProjection();
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
HTML5 <canvas>ペイントやGIMPみたいなドロー系ソフトっぽい機能をJavaScript APIで提供
超絶参考http://www.html5.jp/canvas/
var canvas = $(“canvas”)[0];var context = canvas.getContext(“2d”)context.drawImage( img, 0, 0, width, height, dx, dy, width, height);
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
<canvas>のAPI:toDataURL()
を使う
var canvas = $(“canvas”)[0];var context = canvas.getContext(“2d”);
/* ここで何か描画 */
var url = canvas.toDataURL(“image/png”);$(“a#download”).attr(“href”, url);
ただし、toDataURL()には
セキュリテイ上の使用制限がある!!
それは:HTMLやJavaScriptの
ダウンロード元と、画像ファイルのダウンロード元が
一致している必要がある。
※画像が盗めちゃうから
ダメじゃん!!保存できないじゃん!!
localhostにサーバ立てて
HTMLとJavaScriptとStatic Maps Wrapperを
そこに置けば解決w
<?php$userAgents = array(/* 中略 */);
$baseUrl = "http://maps.google.com/maps/api/staticmap?";
$url = $baseUrl . $_SERVER['QUERY_STRING'];
$userAgent = $userAgents[mt_rand(0, count($userAgents) - 1)];
/* 続く */
/* 続き */
$opts = array( 'http' => array( 'method' => "GET", 'header' => "Accept-Language: " . $_SERVER['HTTP_ACCEPT_LANGUAGE'] . "\r\n" . "User-Agent: " . $userAgent . "\r\n" ));$context = stream_context_create($opts);$handle = fopen($url, "rb", false, $context);$contents = stream_get_contents($handle);
/* 続く */
/* 続き */
$wanted = "Content-Type: ";foreach ($http_response_header as $http_header) { if (stripos($http_header, $wanted, 0) == 0) { header($http_header); }}
fclose($handle);
echo $contents;?>
Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
Static Maps APIの制限を掻い潜らなければ
ならない!!
基本はコレ↓
その1:User-Agentをランダム化する
その2:Query Stringの
順序をランダム化する
その3:座標の走査順序を
ランダム化する