質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

308閲覧

GoogleMaps JavaScript API 地図の範囲外(グレーエリア)までドラッグさせない方法。(上限に達してても地図範囲内のドラッグはさせたい)

monopory

総合スコア19

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2018/05/28 13:12

編集2018/05/29 04:02

[実現したいこと]
地図の範囲外までドラッグさせないようにしたい。また、範囲外まで表示させたくないです。
かつ、経度でのドラッグは止めたくないです。
本家のGoogleMapを見ていただけるとわかりやすいと思うですが、ある程度縮小させて一番上か下にドラッグさせたときの挙動がやりたいことです。

イメージ説明

[現状]
範囲外までいってもひたすらドラッグできてしまう。

[試したこと]
getBounds().getSouthWest(), getBounds().getNorthEast()でそれぞれ範囲外になったときの判定はできてる状態で、api
のsetCenter, setOptionなどで中心点を戻す方法は試してみたのですが、地図が上端、下端になっているときに経度方向にドラッグ毎にも戻ってしまいます。

javascript

1let bounds = myMap.getBounds(); 2let sLat = bounds.getSouthWest().lat(); 3let nLat = bounds.getNorthEast().lat(); 4let currentCenter = myMap.getCenter(); 5 6if(sLat < -85 || nLat > 85) { 7 /*ここでの処理がいまいちわかんないです。 条件文の範囲以上・以下の経度だけ固定できればよさそうですが。。。*/ 8}

”上記と違うアプローチ”やなにか知っている方いましたら、よろしくお願いいたします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

雑な方法かもですが。

ドラッグの都度、範囲を確認

・範囲内 → そのまま地図を表示する。「地図の中心(緯度・経度)」を保持する。

・範囲外 → ひとつ前で保持した「地図の中心」に強制的に戻す

というのはどうでしょう。

(地図の中心を保持せずに、範囲外の場合は「最寄りの範囲内に戻す」も有かと思いますが、最寄りを判別するのが手間そうだな、と^^;)

試してはないので、範囲外にドラッグさせた一瞬「範囲外の地図」が表示されちゃうかもしれませんが・・

投稿2018/05/29 02:04

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

monopory

2018/05/29 03:31 編集

回答ありがとうございます! 範囲外は表示されなくなるのですが、setCenter, setOptionなどで戻してしまうと地図の上端と下端に達し続けているときに経度方向にドラッグした際も前の中心点へと戻ってしまいそうです...。
退会済みユーザー

退会済みユーザー

2018/05/29 03:29

そりゃ質問ソースだと 上限90度だから85-90 はリセットされるんじゃ
Lhankor_Mhy

2018/05/29 07:18

経度はループしますから、緯度だけはみ出た分( .getBounds で取得できているはず )を補正計算し、.panToBounds メソッドで移動させればいいような気がしますね。
mix-peach

2018/05/30 09:11

なるほど。経度はループしてますね!おっしゃるように、判定は緯度だけでも良さそうな気がします。「はみ出た分」が取得できるなら、最寄りの割り出しとかも簡単かもですね・・! >地図の上端と下端に達し続けているときに経度方向にドラッグした際も前の中心点へと戻ってしまいそう 「達し続けてる」という状態が不明ですが、限界値の場合は判定処理を通らないと思うので、例えば正方形の地図だとして、上下がぎりぎりでも横移動はできる想定です。(そんなうまいこと「真横」にドラッグできるのかは置いておきますw) ところでふと思いましたが、ズームアウトしまくって範囲外が表示された場合(達し続けているって、この状態??)のことも、考慮する必要がありますよね・・・。私の回答は、それが考慮されてないので、そこで困りそうです。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問