2009-07-17 18 views
23

Googleマップの画像をキャプチャする方法はありますか? スタティックマップを使用することはできません。マップに私自身のポリラインがあり、それらを「スクリーンショット」に入れたいからです。Googleマップの画像ですか?

基本的に地図をナビゲートしてポリラインを追加し、保存をクリックするとライン、座標、ズームが保存されますが、リストにサムネイルとして表示する画像もあります。

Tksです。

+4

私は静的マップも線を描くことができることを知りました。ポイントはURLを介して送信されます。例えば。 ます。http://maps.google.com/staticmapセンター= 52.09259895866942,4.310945570468903&ズーム= 17&サイズ= 300x200&マップタイプ=衛星&キー= 12345&フォーマット= JPG&パス= RGBA:0xff0000ff、体重:?5 | 52.09254128161833,4.309733211994171 | 52.092371545864,4.309856593608856 | 52.092503379515605,4.31052178144455 | 52.092661579383304,4.310438632965088 これは解決策ではありません。なぜなら、50ポイントを線に引くと、受け入れられない巨大なURLが得られるからです。 他のアイデアはありますか? – Dante

+0

静的マップ上の50ポイントはあまり多くありません。あなたはそのURLで遊ぶために8Kを持っているので、ナッツを行け! –

+0

ここには[snashotcontrol 2.0](http://code.google.com/p/snapshotcontrol/) – Timeless

答えて

17

まさし勝又は、その上にパスして、Googleマップのスナップショットを取り、そこからイメージを作成しSnapshot Controlを打ち出しています。

+1

私はこれが問題の "公式"解決策だと思います。 – Kensai

+0

ポリゴンを簡単に書き出すことはできますが、静的マップAPIを使用しています。地図を描いたままにしたい場合は、キャンバスを保存することも有効な方法です(私の答えを参照) – Arkiliknam

2

ThinkGeo Map Suiteを使用することができます。彼らはあなたのポリラインを引くかもしれないが、その地図スイートV3ケーキ

+1

があります。先端のTks。 – Dante

0

の作品はできませんあると仕事

...そのマップ上など、グーグル、ヤフーやMSマップサービスから画像をレンダリングサポート上記のようにマップAPIを使用してください。ただし、Yahooが提供しており、使用するのはかなり簡単です。

Yahoo: Map Image API

+0

サービスが削除されました2011年9月13日 –

8

サービスの外でGoogleマップのコンテンツを使用するには、使用のGoogle MapsのAPI利用規約に違反していますそうする許可を与えてください。

合法的に目的の機能を達成するには、静的マップ(コンテンツが小さくても、特にユーザーが最大URLの長さが非常に小さいMSIEを使用している場合など)または小さな実際のGoogleマップを使用する必要があります。

質問にコメントを追加したり編集したりする権限がまだないようですので、マップ互換バージョンのMSIEのURLの上限は2083文字ですが、8kではなく他のほとんどのブラウザでは

+0

アラートのためのTks;) – Dante

+0

ユーザーが実際のGoogleマップを使ってスクリーンショットを生成している最初は – NickG

+0

URLが2048文字のURLサイズ制限を超えると、Googleサーバーから400エラーが発生します。どのブラウザーを使用するかは関係ありません。 – Codezilla

3

Google Maps静的APIよりも多くのデータを保存したい場合(カスタムオーバーレイが複雑すぎる/クエリ文字列を通過するなど)、html2Canvas(http://html2canvas.hertzen.com/など)を使用してキャンバスにマップコンテナをエクスポートできます)、それをデータURLに変換し、必要に応じてそれを行います。

function saveMapToDataUrl() { 

    var element = $("#mapDiv"); 

    html2canvas(element, { 
     useCORS: true, 
     onrendered: function(canvas) { 
      var dataUrl= canvas.toDataURL("image/png"); 

      // DO SOMETHING WITH THE DATAURL 
      // Eg. write it to the page 
      document.write('<img src="' + dataUrl + '"/>'); 
     } 
    }); 
} 

Googleから画像をダウンロードできるようにするには、useCORSオプションをtrueに設定する必要があると思います。

このアプローチの欠点は、ページ上に約1メガバイトのデータが残ってしまうことです。

私はダウンロードする画像への地図を書き出すためにこのアプローチを使用しようとしましたが、この画像を素敵な荘園の人にどのように取得するのかに問題がありました。作成したdataUrlにhref属性が設定されているハイパーリンクを使用することもできますが、download = "filename.png"のようなHTML属性を使用しないとファイル名を設定できません。もう1つの方法は、サーバのためにサーバにdataUrlを投稿して、必要なように整理することですが、大きな画像のみをアップロードして再度ダウンロードすることは、これを扱う奇妙な方法です。

+0

useCORSオプションをお寄せいただきありがとうございます。同じhtml2canvasのlibを使用していましたが、マップイメージが正しく来ませんでした。 – shivgre

関連する問題