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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

437閲覧

GoogleMapsAPIで最初に表示されるズームレベルをパラメータで指定する方法

koridentetsu

総合スコア27

Google API

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2023/05/31 11:45

編集2023/05/31 11:46

実現したいこと

GooglemapAPIを利用し、オリジナルの地図をスクロールしたり拡大縮小できるようなページを作っています。
最初に表示されるズームレベルをパラメータで指定するには、どうすれば良いでしょう?

今の所、最初に表示される「位置」はパラメータでの指定が実現できていますが、「ズームレベル」もパラメータで指定したいです。

?lat=84.1&lang=-175.9
のようにパラメータをつけることで、最初に表示される位置を制御することは実現できてます。

ズームレベルも、
?lat=84.1&lang=-175.9&zl=13
のように指定し、最初に表示されるズームレベルを制御することを実現したいですが、可能でしょうか?
試しに80行目の「zoom: 13」を変数にしようとしてもうまくいきませんでした。

コード

html

1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP"> 3<head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>スクロールマップ</title> 7 <link rel="stylesheet" type="text/css" href="index.css" /> 8 <script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBRo1F4ZdttwRPojgEkCUwU7RujeCH7yc&v=3.exp&amp;sensor=false"></script> 9 <script type="application/javascript" src="index.js"></script> 10</head> 11<body> 12 <div id="map_canvas"> 13 地図を読み込んでいます。1分以上待っても表示されない場合は JavaScript を有効にしてください。 14 </div>

js

1// URLパラメータ文字列を取得する 2 3/** 4 * Get the URL parameter value 5 * 6 * @param name {string} パラメータのキー文字列 7 * @return url {url} 対象のURL文字列(任意) 8 */ 9function getParam(name, url) { 10 if (!url) {url = window.location.href; } 11 name = name.replace(/[\[\]]/g, "\\$&"); 12 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 13 results = regex.exec(url); 14 if (!results) {return null; } 15 if (!results[2]) {return ''; } 16 return decodeURIComponent(results[2].replace(/\+/g, " ")); 17} 18 19// LatLngパラメータを取得する 20var lat = getParam('lat'); 21var lng = getParam('lng'); 22var south = getParam('south'); 23var east = getParam('east'); 24 25// パラメータがなければ(84.5292,-175.9337)とする 26if (lat == null) {lat = 84.5292; } 27if (lng == null) {lng = -175.9337; } 28if (south != null) {lat = -1.38221 * (10 ** -6) * (south ** 2) -0.00350628*south +85.051123 -0.00017; } 29if (east != null) {lng = east*0.028856 -179.711 -0.0009; } 30 31// The Original Code is "custom map template using Google Maps API v3". 32// 33google.maps.event.addDomListener(window, "load", function () { 34 var oMapCanvas = document.getElementById("map_canvas"); 35 36 // Custom Map Tile Layer 37 var customMapType = new google.maps.ImageMapType({ 38 name: "道路", 39 tileSize: new google.maps.Size(1681, 2377), 40 isPng: true, 41 maxZoom: 13, //最大詳細 42 minZoom: 9, //最小広域 43 getTileUrl: function(coordinate, zoom) { 44 var zoom = zoom; 45 var x = Math.floor(coordinate.x); //以前は「coordinate.x >> 0」 0ビットシフトでの32bit整数化だったが、Math.floorで整数化する方法に変更 46 var y = Math.floor(coordinate.y); 47 48console.log("X=" + x + ",Y=" + y); 49 50 if (y>=0){ 51 return "../tile_" + zoom + "/Z" + zoom + "S" + y + "E" + x + ".png" 52 .replace("%zoom", zoom.toString()) 53 .replace("%x", x.toString()) 54 .replace("%y", y.toString()); 55 }; 56 if (y<0){ 57 return "../tile_" + zoom + "/Z" + zoom + "N" + -y + "E" + x + ".png" 58 .replace("%zoom", zoom.toString()) 59 .replace("%x", x.toString()) 60 .replace("%y", y.toString()); 61 }; 62 63 } 64 }); 65 var map = new google.maps.Map(oMapCanvas, { 66 zoom: 13, //最初に表示したときのズームレベル (13→5万, 12→10万, 11→20万, 10→40万, 9→80万, 8→160万, 7→320万, 6→640万, 5→1280万) 67 center: new google.maps.LatLng(lat,lng), //最初に表示する位置 (以前は固定値だったが、URLのパラメータから取得した値を利用する方法に変更) 68 disableDefaultUI: true, 69 panControl: true, 70 mapTypeId: customMapType.name 71 }); 72 map.mapTypes.set(customMapType.name, customMapType); 73 74 //イベントリスナ 75 google.maps.event.addListener(map, 'center_changed', function() {// 76 dispLevel(map.getCenter());// 77 }); //移動した場合 78 google.maps.event.addListener(map, 'zoom_changed', function() {// 79 dispLevel(map.getZoom());// 80 }); //ズームレベルが変化した場合 81 82 //画面中央にマーカーを固定 83 //ターゲットスコープをセット 84 var tgt_marker = new google.maps.Marker({ 85 position: {lat: 0, lng: 0}, 86 map: map, 87 icon: { 88 url: 'gmap_cross.gif', 89 origin: new google.maps.Point(0, 0), //(アイコンセットから切り出す時に使用、今回は0,0) 90 size: new google.maps.Size(32, 32), //画像ファイルの大きさ 91 scaledSize: new google.maps.Size(32, 32), //(画像を拡縮表示する時に使用、原寸ならsizeと同じか省略) 92 anchor: new google.maps.Point(16, 16) //中央位置の画像(scaledSizeを基準) 93 }, 94 clickable: false, /* クリック不可 */ 95 zIndex: 0 96 }); 97 //ターゲットスコープ表示 98 tgt_marker.setMap(map); 99 //地図の表示内容が変更されたら、センター座標取得しマーカー座標変更 100 google.maps.event.addListener( map ,'bounds_changed',function(){ 101 var pos = map.getCenter(); 102 tgt_marker.setPosition(pos); 103 }); 104 105 // Map tile license (移動またはズームレベル変更したらこれに置き換える) 106 107 function dispLevel(level) { 108 var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5 109 var Ec = (179.711+map.getCenter().lng())/0.028856+0.53 110 var S = Math.round(Sc) 111 var E = Math.round(Ec) 112 var Sd = ('00'+Math.floor(S/10)).slice(-2) 113 var Ed = ('00'+Math.ceil(E/10)).slice(-2) 114 var Ido = Math.round((36-Sc/40)*100 -12)/100 115 var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100 116 117 var NS 118 if (S > 0) {NS = "S" + S}; 119 if (S <= 0) {NS = "N" + (-1)*S }; 120 var EW 121 if (E >= 0) {EW = "E" + E}; 122 if (E < 0) {EW = "W" + (-1)*E }; 123 var NSd 124 if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) }; 125 if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) }; 126//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要 127 128//console.log(NS + EW); 129//console.log(NSd); 130 131 document.getElementById("zoomlevel").innerHTML = 132"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 133"<!--<BR>位置" + map.getCenter() + 134"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "'>この位置の固定リンク</a>" + 135"<BR>北緯" + Ido + ", 東経" + Keido + 136"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" + 137"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" + 138"<div id=\"open\" style=\"display:none;clear:both;\">" + 139"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" + 140"<ol>" + 141"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" + 142"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" + 143"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" + 144"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" + 145"</ol>" + 146"</div>" + 147"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //1度でもズームや位置を変更するとこちらを表示 148 } 149 150 // Map tile license (最初に表示するもの) 151 152 var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5 153 var Ec = (179.711+map.getCenter().lng())/0.028856+0.53 154 var S = Math.round(Sc) 155 var E = Math.round(Ec) 156 var Sd = ('00'+Math.floor(S/10)).slice(-2) 157 var Ed = ('00'+Math.ceil(E/10)).slice(-2) 158 var Ido = Math.round((36-Sc/40)*100 -12)/100 159 var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100 160 161 var NS 162 if (S > 0) {NS = "S" + S}; 163 if (S <= 0) {NS = "N" + (-1)*S }; 164 var EW 165 if (E >= 0) {EW = "E" + E}; 166 if (E < 0) {EW = "W" + (-1)*E }; 167 var NSd 168 if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) }; 169 if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) }; 170//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要 171 172 var copyrightDiv = document.createElement("div"); 173 copyrightDiv.style.fontSize = "10px"; 174 copyrightDiv.style.whiteSpace = "nowrap"; 175 copyrightDiv.style.padding = "0 6px"; 176 copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)"; 177 var copyrightSpan = document.createElement("span"); 178 copyrightSpan.setAttribute("id", "zoomlevel"); 179 copyrightSpan.setAttribute("style", "color: #444;"); 180 copyrightSpan.innerHTML = 181"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 182"<!--<BR>位置" + map.getCenter() + 183"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "'>この位置の固定リンク</a>" + 184"<BR>北緯" + Ido + ", 東経" + Keido + 185"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" + 186"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" + 187"<div id=\"open\" style=\"display:none;clear:both;\">" + 188"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" + 189"<ol>" + 190"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" + 191"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" + 192"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" + 193"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" + 194"</ol>" + 195"</div>" + 196"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //最初はこちらを表示 197 copyrightDiv.appendChild(copyrightSpan); 198 map.controls[google.maps.ControlPosition.RIGHT].push(copyrightDiv); //[google.maps.ControlPosition.BOTTOM_RIGHT] → [google.maps.ControlPosition.RIGHT] に変更 199});

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

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

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

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

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

68user

2023/05/31 12:51

lat や lng がパラメータ指定できているのであれば同じようにすればよいだけだと思うんですが、何がうまくいかないですか。うまくいかない状態のソースを提示してください
AbeTakashi

2023/05/31 13:07

> 試しに80行目の「zoom: 13」を変数にしようとしてもうまくいきませんでした 変数にしようとした形跡が提示されたソースコードにはないと思うのですが、どのように実装してどのようにうまくいかないのでしょうか? 68userさんも書かれてますが、現状が分からないとアドバイスが出にくいと思います。質問文は追記や編集が可能ですので、そちらの対応をお願いします。
koridentetsu

2023/05/31 13:55

lat, lngと同様に指定するようにしたら解決いたしました。お騒がせしました。
guest

回答1

0

自己解決

このように指定することで解決できました。

js

1// URLパラメータ文字列を取得する 2 3/** 4 * Get the URL parameter value 5 * 6 * @param name {string} パラメータのキー文字列 7 * @return url {url} 対象のURL文字列(任意) 8 */ 9function getParam(name, url) { 10 if (!url) {url = window.location.href; } 11 name = name.replace(/[\[\]]/g, "\\$&"); 12 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 13 results = regex.exec(url); 14 if (!results) {return null; } 15 if (!results[2]) {return ''; } 16 return decodeURIComponent(results[2].replace(/\+/g, " ")); 17} 18 19// LatLngパラメータを取得する 20var lat = getParam('lat'); 21var lng = getParam('lng'); 22var south = getParam('south'); 23var east = getParam('east'); 24var zl = getParam('zl'); 25 26// パラメータがなければ(84.5292,-175.9337)とする 27if (lat == null) {lat = 84.5292; } 28if (lng == null) {lng = -175.9337; } 29if (south != null) {lat = -1.38221 * (10 ** -6) * (south ** 2) -0.00350628*south +85.051123 -0.00017; } 30if (east != null) {lng = east*0.028856 -179.711 -0.0009; } 31 32// パラメータがなければズームレベルは13に 33if (zl == null) {zl = 13} 34{zl = Math.round(zl)} // 四捨五入 35 36if (zl > 13) {zl = 13} //13超なら13に 37if (zl < 9) {zl = 9} //9未満なら9に 38 39// The Original Code is "custom map template using Google Maps API v3". 40// 41 42google.maps.event.addDomListener(window, "load", function () { 43 var oMapCanvas = document.getElementById("map_canvas"); 44 45 // Custom Map Tile Layer 46 var customMapType = new google.maps.ImageMapType({ 47 name: "道路", 48 tileSize: new google.maps.Size(1681, 2377), 49 isPng: true, 50 maxZoom: 13, //最大詳細 51 minZoom: 9, //最小広域 52 getTileUrl: function(coordinate, zoom) { 53 var zoom = zoom; 54 var x = Math.floor(coordinate.x); //以前は「coordinate.x >> 0」 0ビットシフトでの32bit整数化だったが、Math.floorで整数化する方法に変更 55 var y = Math.floor(coordinate.y); 56 57console.log("X=" + x + ",Y=" + y); 58//Xがマイナスの領域の扱い方: 59//Z=13のとき x=-1 が x=1247 に相当する 60//Z=12のとき x=-1 が x=623 に相当する 61//Z=11のとき x=-1 が x=311 に相当する 62//Z=10のとき x=-1 が x=155 に相当する 63//Z=9のとき x=-1 が x=77 に相当する 64 65 66//画像のファイル名を-1ではなく1247にしておけばマイナス部分も正常に動作する 67//ただし東経とかは変な値になる 68//実験結果、Z=9で延々と東へ進み続けると一周して戻ってきた、このときE0がE12480と表示される 69//Xのマイナス部分のファイル名をWで対応できる方法は検討中 70 71 if (y>=0){ 72 return "../tile_" + zoom + "/Z" + zoom + "S" + y + "E" + x + ".png" 73 .replace("%zoom", zoom.toString()) 74 .replace("%x", x.toString()) 75 .replace("%y", y.toString()); 76 }; 77 if (y<0){ 78 return "../tile_" + zoom + "/Z" + zoom + "N" + -y + "E" + x + ".png" 79 .replace("%zoom", zoom.toString()) 80 .replace("%x", x.toString()) 81 .replace("%y", y.toString()); 82 }; 83 84 } 85 }); 86 var map = new google.maps.Map(oMapCanvas, { 87 zoom: zl, //最初に表示したときのズームレベル (13→5万, 12→10万, 11→20万, 10→40万, 9→80万, 8→160万, 7→320万, 6→640万, 5→1280万) 88 center: new google.maps.LatLng(lat,lng), //最初に表示する位置 (以前は固定値だったが、URLのパラメータから取得した値を利用する方法に変更) 89 disableDefaultUI: true, 90 panControl: true, 91 mapTypeId: customMapType.name 92 }); 93 map.mapTypes.set(customMapType.name, customMapType); 94 95 96 97 //イベントリスナ 98 google.maps.event.addListener(map, 'center_changed', function() {// 99 dispLevel(map.getCenter());// 100 }); //移動した場合 101 google.maps.event.addListener(map, 'zoom_changed', function() {// 102 dispLevel(map.getZoom());// 103 }); //ズームレベルが変化した場合 104 105 106 //画面中央にマーカーを固定 107 //ターゲットスコープをセット 108 var tgt_marker = new google.maps.Marker({ 109 position: {lat: 0, lng: 0}, 110 map: map, 111 icon: { 112 url: 'gmap_cross.gif', 113 origin: new google.maps.Point(0, 0), //(アイコンセットから切り出す時に使用、今回は0,0) 114 size: new google.maps.Size(32, 32), //画像ファイルの大きさ 115 scaledSize: new google.maps.Size(32, 32), //(画像を拡縮表示する時に使用、原寸ならsizeと同じか省略) 116 anchor: new google.maps.Point(16, 16) //中央位置の画像(scaledSizeを基準) 117 }, 118 clickable: false, /* クリック不可 */ 119 zIndex: 0 120 }); 121 //ターゲットスコープ表示 122 tgt_marker.setMap(map); 123 //地図の表示内容が変更されたら、センター座標取得しマーカー座標変更 124 google.maps.event.addListener( map ,'bounds_changed',function(){ 125 var pos = map.getCenter(); 126 tgt_marker.setPosition(pos); 127 }); 128 129 130 // Map tile license (移動またはズームレベル変更したらこれに置き換える) 131 132 function dispLevel(level) { 133 var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5 134 var Ec = (179.711+map.getCenter().lng())/0.028856+0.53 135 var S = Math.round(Sc) 136 var E = Math.round(Ec) 137 var Sd = ('00'+Math.floor(S/10)).slice(-2) 138 var Ed = ('00'+Math.ceil(E/10)).slice(-2) 139 var Ido = Math.round((36-Sc/40)*100 -12)/100 140 var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100 141 142 var NS 143 if (S > 0) {NS = "S" + S}; 144 if (S <= 0) {NS = "N" + (-1)*S }; 145 var EW 146 if (E >= 0) {EW = "E" + E}; 147 if (E < 0) {EW = "W" + (-1)*E }; 148 var NSd 149 if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) }; 150 if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) }; 151//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要 152 153//console.log(NS + EW); 154//console.log(NSd); 155 156 document.getElementById("zoomlevel").innerHTML = 157"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 158"<!--<BR>位置" + map.getCenter() + 159"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "&zl=" + map.getZoom() + "'>この位置の固定リンク</a>" + 160"<BR>北緯" + Ido + ", 東経" + Keido + 161"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" + 162"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" + 163"<div id=\"open\" style=\"display:none;clear:both;\">" + 164"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" + 165"<ol>" + 166"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" + 167"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" + 168"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" + 169"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" + 170"</ol>" + 171"</div>" + 172"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //1度でもズームや位置を変更するとこちらを表示 173 } 174 175 // Map tile license (最初に表示するもの) 176 177 var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5 178 var Ec = (179.711+map.getCenter().lng())/0.028856+0.53 179 var S = Math.round(Sc) 180 var E = Math.round(Ec) 181 var Sd = ('00'+Math.floor(S/10)).slice(-2) 182 var Ed = ('00'+Math.ceil(E/10)).slice(-2) 183 var Ido = Math.round((36-Sc/40)*100 -12)/100 184 var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100 185 186 var NS 187 if (S > 0) {NS = "S" + S}; 188 if (S <= 0) {NS = "N" + (-1)*S }; 189 var EW 190 if (E >= 0) {EW = "E" + E}; 191 if (E < 0) {EW = "W" + (-1)*E }; 192 var NSd 193 if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) }; 194 if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) }; 195//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要 196 197 var copyrightDiv = document.createElement("div"); 198 copyrightDiv.style.fontSize = "10px"; 199 copyrightDiv.style.whiteSpace = "nowrap"; 200 copyrightDiv.style.padding = "0 6px"; 201 copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)"; 202 var copyrightSpan = document.createElement("span"); 203 copyrightSpan.setAttribute("id", "zoomlevel"); 204 copyrightSpan.setAttribute("style", "color: #444;"); 205 copyrightSpan.innerHTML = 206"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 207"<!--<BR>位置" + map.getCenter() + 208"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "&zl=" + map.getZoom() + "'>この位置の固定リンク</a>" + 209"<BR>北緯" + Ido + ", 東経" + Keido + 210"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" + 211"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" + 212"<div id=\"open\" style=\"display:none;clear:both;\">" + 213"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" + 214"<ol>" + 215"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" + 216"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" + 217"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" + 218"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" + 219"</ol>" + 220"</div>" + 221"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //最初はこちらを表示 222 copyrightDiv.appendChild(copyrightSpan); 223 map.controls[google.maps.ControlPosition.RIGHT].push(copyrightDiv); //[google.maps.ControlPosition.BOTTOM_RIGHT] → [google.maps.ControlPosition.RIGHT] に変更 224}); 225

投稿2023/05/31 13:56

koridentetsu

総合スコア27

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問