• 締切済み

Yahoo!map(YOLP)の最適ズーム率設定

いつもお世話になっております。Windows10の環境でYOLP(Yahoo!地図)にJavaScriptで配列を利用し複数マーカーを表示出来るようにしましたが、全マーカーを表示出来るように最適ズームレベルの自動設定は可能でしょうか。配列のマーカー位置の数を別のデータから供しているため一定数ではない条件で地図を作成しているため固定ズーム値を設定すると最適ズームを手動で行わなくてはならないので、LeafletやGoogleMapでmap.fitBounds()メソッドを使うことによって最適ズームが可能なように、YOLPでそれに変わる方法があればご教示お願いいたします。 Yahoo!スタティックマップAPIでも全マーカーを表示する方法もあるのですが、この静的表示ではピンに番号をふれてもポップアップ(吹き出し)の設定やドローやズーム等の動的作業は出来そうにありません。

みんなの回答

  • togurin
  • ベストアンサー率45% (81/180)
回答No.2

No.1です。 解決しましたでしょうか。 私も気になって少しドキュメントを読んでみました。 考えなしに回答していてすみませんでしたが、ズームレベルは1-20までで微調整は効かず、距離指定の換算になるんですね。 実際にコードを書いていないので詳しくはわかりませんが、 確かに地図の大きさ(例えばwidth:700px; height:700px)が変わると適用できない気がします。 よって、 地図の大きさは知っている、もしくは取得できるので、 地図の大きさとズームレベルを渡すと地図の縦横の距離を返す関数は作れないでしょうか。 対応表のようなデータは必要かと思いますが、この関数内で引いて換算すれば、 大体の距離がわかるのではと推測します。 - 入力:width(px), height(px), zoomLevel - 出力:地図の横の距離([km] or [m]), 地図の縦の距離([km] or [m]) 入力はもう少し情報が必要かもしれませんが。 地図の縦横の距離がわかれば、最初に回答した方法で、中心座標とそこから一番遠い座標の距離を計算し、 その距離が、先の関数で計算した範囲におさまるズームレベルを採用して、 下記のように指定すれば良いのではないでしょうか。 -- new Y.LatLng(35.64997652994234,139.72116702175174) ymap.setZoom(zoomLevel, true, p, true); -- (https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index6-2)より抜粋、一部変更 上記を行う上で重要となるのが緯度経度で示される2点間の距離の計算かと思います。 色々方法があるようで、下記サイトの方法で十分な精度がでるのではないでしょうか。 JavaScriptのコードが載っているので参考になると思います。 https://tech-blog.s-yoshiki.com/2018/05/92/ またまた見当違いならすみませんがご参考までに。

turu575
質問者

お礼

度々回答有難うございます。 2点間の距離の計算の距離計算のサイトは、以前にmap上のマーカーから座標を取得して距離計算を算出する際に見ましたがjavascript自体が素人のためどう組み込めば分からないので諦めていました。そのため距離計算の方法として、ヒュベニの公式や国土地理院の計算式を直接使わずYahoo!地図(YOLP)APIの2点間距離APIに必要座標を入れJson形式で取得していました。今回の問題でも地図の大きさギリギリの場所の場合に自作の適合表ではセンター位置の調整を考慮していなかったため納得の行かない結果が出ることがままあり、そこでYahoo!スタティックマップAPIに1度座標データを渡しhtml形式の出力値からzoom値を取得しその値を代入して地図表示させるようにしました。まあ自分だけ使う分には、APIの回数制限には程遠いと思い・・元々自分で考えてコードを書くより他力本願のコピペで済ます事が多かったので。 正直、GoogleMapAPIの時と比べYOLPを使うハウツーサイトの数も極端に少なく検索すれば公式サイトが直ぐヒットします。Yahoo! JavaScriptマップAPIも何回も見ましたが素人故理解不能の方が多く・・なんでjavascriptで説明しておきサンプルはjqueryで書いてあるんだとか・・ この最適ズームの選択に関してはご意見等を参考にゆっくり考えてみます。本当にご丁寧なご回答有り難うございました。

  • togurin
  • ベストアンサー率45% (81/180)
回答No.1

文章を読んだだけの回答でYOLPは全然知らないので見当違いならすみません。 いろいろ調べられているようなのでそのようなメソッドはないのかもしれませんね。 ただ、表示したい複数マーカーの位置座標は取れているわけですよね? それなら座標の平均を取って、その平均座標と一番遠いマーカーを計算すれば、平均座標を中心にどれくらいのズームレベルを設定すればよいかも計算できるのではないでしょうか。GoogleMapとかだとメソッドがあるとしても内部的にはそのような事をしている気がします。 JavaScriptというより数学的な話ですが、解決しませんかね。。。

turu575
質問者

お礼

回答ありがとうございます。 >座標の平均を取って、その平均座標と一番遠いマーカーを計算すれば、平均座標を中心にどれくらいのズームレベルを設定すればよいかも計算できるのではないでしょうか。 緯度によって経度間の距離が変わることを考慮しないで(使用環境を日本に限定しているので)現在暫定的に使っている方法は、YOLPのズーム段階の5から20段階と表示する地図(例えばwidth:700px; height:700px)の緯度経度間隔(適当ですが地図上で測定したもの、北緯に関してはマーカーの大きさを考慮する必要あり)対応表を作り、表示マーカーの緯度経度の最大間隔求めることによってズーム値を決定しています。この方法では地図の大きさが変わると適用できない等様々な問題を含んでいるので質問に及んだわけです。

関連するQ&A

  • グーグルマップのマーカー

    グーグルマップに表示されたマーカーをクリックすると 吹き出しとか関係なくそのマーカーのもっている座標点に 地図の中心が移動するようにしたいのですが どのように記述するのでしょうか?

  • GoogleApiについて質問です。

    GoogleApiについて質問です。 【例】 (1)GoogleMapで「国会議事堂」を検索する (2)マーカーAが表示される (3)マーカーAをクリックする (4)吹き出しが表示される(添付画像) 【やりたいこと】 (1)GoogleApiで自作のHPにMAPを表示する。 (2)「国会議事堂」を検索しマーカーを表示する (3)マーカーをクリックする。 (4)自作の吹き出しを表示する。(HTML形式) ●吹き出しについて 自作の吹き出しは表示できますが 【例】(4)のGoogleMap吹き出しを表示させることはできるのでしょうか? 自作で吹き出しを作成するのは数が増えると大変なので ご存知の方よろしくお願いします。

  • Google Map API2 openInfoWindowHtmlのmaxWidth

    Google Map API2で、openInfoWindowHtmlを使って吹き出しを作ってます。 ドキュメントなどを見ると、maxWidthプロパティで吹き出しの幅を変えられることになっているのですが、いろいろやってみても幅が変わらないようです。 サンプルソース function seeAt(lat, lng, title, body, size) { var point = new GLatLng(lat, lng) map.setCenter(point, size); var html="<b>"+title+"</b><p>"+body+"</p>"; var marker = new GMarker(point); map.addOverlay(marker); map.openInfoWindowHtml(point, html, {maxWidth:400}); } という関数を作っておいて、 <a href="javascript:void(0);" onclick="seeAt(35.55, 139.78, '羽田空港', '', 13);">羽田空港発</a> といった感じで、呼び出します。 地図移動やマーカー、吹き出しや中の文字列はちゃんと表示されるんですが、幅設定だけができません。

  • GoogleMapにカラーマーカーと吹き出し

    GoogleMapにそれぞれのポイントに色んな色のカラーマーカーと吹き出しをいれたいのですが 吹き出しを表示させる方法はなんとかなったのですが 現在のHTMLに上手くマーカーに色を設定できません。 現在のmapが下記URLになります。こちらのどこに書き込めば反映されるのかどうかご教授よろしくお願いいたします。 http://www.royal-resort.co.jp/hakone/g_map/test_map.html

    • ベストアンサー
    • HTML
  • グーグルマップの吹出しは複数可能?

    グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて2つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか? お忙しいところ是非教えていただければと思います。 よろしくお願いします。

  • Google Map APIを使用して、ふきだし内にExcelファイル

    Google Map APIを使用して、ふきだし内にExcelファイルへのリンクをはる方法 GoogleMapAPIを使って、地図上に吹き出しがでるように作成しました。 吹き出し内にリンクをはり、フォルダ直下のエクセルファイルを開くように 設定したいのですが可能でしょうか。URLしか設定できないのでしょうか。 よろしくお願いします。

  • YOLPのマーカークリックでリンク先に飛ぶには?

    Yahoo! JavaScriptマップAPIを使い、日本地図に複数のマーカーに吹き出しを付けて以下の形にしました。 このマーカーをダブルクリックしたときに、それぞれ指定したリンク先に飛ぶようにしたいのですが、どのようにすればよいのでしょうか。 また、現在のところマーカーのマウスホバーで吹き出しが表示されるのですが、これをマウスクリック(タップ)で表示するにはどうすればよいでしょうか。さらに別のマーカーをクリックするとそれまで開いていた吹き出しが消えて、クリック先の吹き出しに切り替わるようにしたいと考えています。 ご教示お願いいたします。 window.onload = function(){ var ymap = new Y.Map("map"); ymap.drawMap(new Y.LatLng(35.68132732438393,139.76650149843817), 6,"map"); var markers = []; markers.push( new Y.Marker(new Y.LatLng(35.674756131624456,139.73189027331),{title: "赤坂A地点"})); markers.push( new Y.Marker(new Y.LatLng(35.67024139121164,139.72727687380439),{title: "赤坂B地点"})); markers.push( new Y.Marker(new Y.LatLng(35.63223075430667,139.88597781679755),{title: "浦安A地点"})); ymap.addFeatures( markers ); }

  • googlemapについての質問です。

    googlemapについての質問です。 通常はマーカーが表示、クリックすると吹き出しが出てテキスト等の説明が表示されますが、 マップ自体にテキストを埋め込む方法はありますか? 以下のような漢字です。 http://fishing-map.net/

  • Google Map Api 複数のマーカーをおくと、一部が表示されない

    お疲れ様です。 お世話になっております。 Google Map Apiで複数のマーカーを設置するスクリプトを組みました。 10件程度は問題なく表示されるのですが、10件を境に、表示されたり、されなかったりします。 F5で表示されるもの、されないものとまばらになるので、なんとなく原因は、処理よりも表示のほうが速いからではないか?ということなんですが、JSの処理の流れがイマイチわかっていないので、結論は出せません。 実際20件登録したところ、10件~17件の間で出たり出なかったりします。1~10件までは必ず表示され、その後ろのIDを持つものがランダムになります。 これを確実に全部表示されるようにしたいのですが、表示の前にsleepなどかけるのがよいのか、ajaxにしてみるのがよいのかなど、検討がつきません。 下記が、書いたスクリプトです。 もしよければ、アドバイスお願いします。 var markers = new Object(); var marker = new Object(); marker["name"] = "xxx"; marker["icon"] = "ylw-pushpin"; marker["address"] = "座標変換用の住所"; marker["text"] = "噴出しの中身"; marker["center"] = "中心にするかしないか"; markers[0] = marker; 20回ループ markers[20] = marker; googlemap(markers) -----------googlemap(markers) function googlemap(markers) { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById("map")); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); for(var i in markers){ showAddress(markers[i]); //ここは20回ちゃんとまわってるようです } } } ------------------showAddress() function showAddress(amarker) { if (geocoder) { geocoder.getLatLng( amarker['address'], function(point) { if(amarker['center'] == 1){ map.setCenter(point, 12); } //アイコンが指定されてたらアイコンを設定 if(amarker['icon']){ var marker = new GMarker(point,micon); //アラートしてみると、ここが10回~17回ぐらいしか回ってない }else{ var marker = new GMarker(point); } map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(ふきだしのなかみ) }); } ); } }

  • google map

    こんにちは。最近「google map」を使いはじめまして、 いろいろと地図を作って試しているのですが、わからない ことがありまして。。お願い致します。 google mapの「サイドバー」と「吹き出しのタブ」の 両方を同時に表示させたいのですが、どのようにすれば よろしいのでしょうか。 「サイドバー」と「吹き出しタブ」を別々に表示させること はできたのですが、どうしても両方を同時に表示させること ができません。 サイドバーは以下のような感じで作っています。 function createMarker(point, name, html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); gmarkers[i] = marker; htmls[i] = html; sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br />'; i++; return marker; } function myclick(i) { gmarkers[i].openInfoWindowHtml(htmls[i]); } 吹き出しタブは以下のような感じで作りました。 function createTabbedMarker(point,html1,html2,label1,label2,n) { var marker = new GMarker(point,icon[n]); GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]); }); return marker; } どうぞ、よろしくお願い致します。

専門家に質問してみよう