まず、自サイトにgoogle maps api v3 を使って地図を表示させ、ユーザーに自由に場所やズームレベルを変更してもらいます(※この時、地図上にマーカーを付けたり、ストリートビューに変更することも可能とします)。
そして、好きなタイミングでブラウザ上の「OK」ボタンを押すと、その地図をキャプチャして画像として取得する。というようなことをしたいのですが、この地図→画像変換をする良い方法が見つからずに困っております。。。最終的にはその画像をcanvasの背景画像として使用したいのですが、どなたか良い変換方法をご存知の方おられませんでしょうか?
宜しくお願いします。
【捕捉】
無理にキャプチャではなくても、たとえばKMLなどの形式で外部出力する方法でも構いません。
要件は、ユーザーが任意に変換させた地図情報を、(再度、サイトを開き直した時に)まったく同じ状態で再現出来ればそれでもOKです。
動的マップ→静的マップの完全変換などでも、情報お持ちの方おられたは、是非お願いしますm(__)m
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答5件
0
ベストアンサー
何度も失礼いたします。
正しいやり方かどうか怪しいですが、ストリートビューに切り替わってからの値取得方法をちょっと見つけましたので(^_^;)
とりあえず、getStreetView()で定義しておいて…
getVisible() でストリートビューが表示されているかどうか
getPosition() で座標
getPov() で視点情報(オブジェクト)
が取得できます。
サンプルHTML(かなり適当ですが…動確しています)
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>TEST</title> 6 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> 7 8</head> 9<body> 10<div id="gmap" style="width : 500px; height : 500px;"></div> 11<input type='button' value='consoleに情報出力' onclick='test();'> 12<script type="text/javascript"> 13 var map = document.getElementById("gmap"); 14 var gmap; 15 var streetViewPanorama; 16 17 google.maps.event.addDomListener(window, 'load', function() { 18 var options = { 19 zoom: 16, 20 center: new google.maps.LatLng(35.686773, 139.68815), 21 mapTypeId: google.maps.MapTypeId.ROADMAP 22 }; 23 sv = new google.maps.Map(map, options); 24 streetViewPanorama = sv.getStreetView(); //とりあえず定義 25 streetViewPanorama.setVisible(false); //見えないよーに 26 }); 27 28 function test() { 29 console.log(streetViewPanorama.getVisible()); 30 console.log(streetViewPanorama.getPosition()); 31 console.log(streetViewPanorama.getPov()); 32 } 33</script> 34</body> 35</html>
お望みのことができるかどうかアレですが…GIS系好きなので応援しています。
投稿2015/06/15 07:14
総合スコア256
0
位置と縮尺だけであれば…
ボタンが押されたときに、中心点座標と縮尺を取得して記録する方法でいかがでしょうか。
中心座標の取得
lang
1center_latlng = 地図id.getCenter();
縮尺の取得
lang
1zoom_level = 地図id.getZoom();
値を(外部ファイル、DB、cookieなどで)何かしらクライアント情報と紐付けて記録し、再訪時に再現できるかと思われます。
追加マーカー情報など付与情報は、付与操作ごとに記録して再現…
ストリートビューに切り替わったアトは……思いつきませんでしたm(__)m
投稿2015/06/14 08:10
総合スコア256
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
google maps api v3でとは別の回答になりますが、
ガラケー用に地図を画像で表示させるためのGoogle Static Maps APIというのを以前に使ったことがあります。
今は使用できるか確認はしていません。
投稿2015/06/14 03:40
総合スコア90
0
水を差すような回答で申し訳ありません。
Google Mapをご利用になるのであれば、使用許諾にご留意ください。
Google 使用許諾
Google マップおよび Google Earth に関する使用許諾ガイドライン
https://www.google.co.jp/permissions/geoguidelines.html
オフラインでの使用: Google マップまたは Google Earth からの対象コンテンツを切り取る、またはその他の形でエクスポートする、またはオフラインでの使用のために保存することはできません。
対象および、用い方に問題なければ、失礼の段お詫び申し上げます。
投稿2015/06/14 01:13
総合スコア256
0
DOM要素をSVG画像に変換する事で、キャプチャできるようですが、制限が多い為、Mapでは使えないように思えます。
https://developer.mozilla.org/ja/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
後はCanvasを使った描画ですが、親子関係があるとMapが動かなくなるようなので、これも使えないかもしれません。
http://lab.informarc.co.jp/javascript/canvas_meets_googlemaps.html
サーバーサイドを利用すれば、Webページ自体をキャプチャできますので、工夫次第で実現は可能かと思われます。
http://shobon.hatenablog.com/entry/2014/08/04/202726
もっとシンプルで簡単な実装方法があるかもしれませんが、思いつくものとしては以上になります。
投稿2015/06/13 23:39
総合スコア1464
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/15 23:55