1381129725 「現在地から半径n m(メートル)の場所を同心円で表示する」ウェブアプリを作っているのですが、以下の2)でつまずいてしまい、困っております。ここのURLに解決策のヒントがあるよーという具体的なアドバイスもしくは具体的なコードを教えてください。よろしくお願いいたします。

なお、画像のようなイメージしています。

1)現在地を取得してGoogleMaps上に表示する
2)現在地から半径nのところに同心円を表示する
3)twitter連携 2)でできた地図をツイートできるようにする



回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/07 16:08:45
  • 終了:2013/10/14 16:10:04

ベストアンサー

id:gizmo5 No.1

gizmo5回答回数484ベストアンサー獲得回数1382013/10/07 17:24:56

ポイント50pt

Google のサンプルです。
https://developers.google.com/maps/documentation/javascript/examples/circle-simple

1)現在地を取得してGoogleMaps上に表示する

はできているようなので以下の変数は設定されているはずです。

  • 地図を表す google.maps.Map
  • 中心の位置を表す google.maps.LatLng

それを使って以下のような感じで円が書けます。

    var circleOpt = {
      strokeColor: '#000000',
      strokeOpacity: 1,
      strokeWeight: 10,     // 太さ(ピクセル)
      fillColor: '#000000',
      fillOpacity: 0,
      map: map,             // google.maps.Map
      center: center,       // 中心の google.maps.LatLng
      radius: rad           // 半径をメートルで
    };
    var circle = new google.maps.Circle(circleOpt);

API のリファレンスです。
https://developers.google.com/maps/documentation/javascript/reference#Circle
https://developers.google.com/maps/documentation/javascript/reference#CircleOptions

id:tukihatu

こんなコードあったんですね、勉強不足でした・・・
http://gmap3.blog52.fc2.com/blog-entry-31.html

2013/10/07 17:46:02
id:zineriki

ありがとうございます!まさに求めていたものです!

2013/10/27 07:46:05

その他の回答(1件)

id:gizmo5 No.1

gizmo5回答回数484ベストアンサー獲得回数1382013/10/07 17:24:56ここでベストアンサー

ポイント50pt

Google のサンプルです。
https://developers.google.com/maps/documentation/javascript/examples/circle-simple

1)現在地を取得してGoogleMaps上に表示する

はできているようなので以下の変数は設定されているはずです。

  • 地図を表す google.maps.Map
  • 中心の位置を表す google.maps.LatLng

それを使って以下のような感じで円が書けます。

    var circleOpt = {
      strokeColor: '#000000',
      strokeOpacity: 1,
      strokeWeight: 10,     // 太さ(ピクセル)
      fillColor: '#000000',
      fillOpacity: 0,
      map: map,             // google.maps.Map
      center: center,       // 中心の google.maps.LatLng
      radius: rad           // 半径をメートルで
    };
    var circle = new google.maps.Circle(circleOpt);

API のリファレンスです。
https://developers.google.com/maps/documentation/javascript/reference#Circle
https://developers.google.com/maps/documentation/javascript/reference#CircleOptions

id:tukihatu

こんなコードあったんですね、勉強不足でした・・・
http://gmap3.blog52.fc2.com/blog-entry-31.html

2013/10/07 17:46:02
id:zineriki

ありがとうございます!まさに求めていたものです!

2013/10/27 07:46:05
id:tukihatu No.2

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322013/10/07 17:27:34

ポイント50pt

できるかやったことないですが、まず一番簡単な方法を。
GMAPのAPIを使うのなら、マーカー画像を変更できるはずです。
おそらくその周辺nメートルに円を書く処理をすると
相当面倒なコードになるでしょう。
そうではなくマーカー自体を円が既についているマーカーにしてしまえばいいのでは?

http://www.nanchatte.com/map/changeMarkerImage.html
こんなイメージ。青丸をもっと広げて、
真ん中に点がある画像を作って置き換えればどうでしょう
(縮尺はmapに書いてあるのでそれを見てサイズをあわせて画像を作るとか)
まあmapの+-でユーザーが大きさ変えられる場合はつらいですけどね。


あと他の方法は、ガッチリプログラムになりますが・・・
考え方として、3)で画像として加工するときに、
トリミングして最終的な画像サイズにするんだと思いますが、
たとえば最終的に300×300の画像の場合、
200×200の円画像を別に用意しておいて画像の左50上50の位置から貼り付けるとか。
ウェブ製作のカテゴリなのでPHPかjavaかC++かそのあたりでしょうけど、
どの言語でもこの手法は有効でしょう。面倒ですが。


画像編集系の操作は複雑だったり、言語によってだいぶ違ったり
ニッチな分野で本もネット情報が乏しいので
ひとつずつ試していくしかないでしょう。
画像編集を使わずAPIの機能だけでできれば一番楽なんですけどね。


質問に書かれてる情報ではこのぐらいしか答えられませんが・・・

id:zineriki

ありがとうございます!

2013/10/27 07:46:38

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません