あにねこ電脳覚書 - サポート掲示板
スレッド：Google地図の追加
Google地図の追加 投稿者：
あにねこ 投稿日：2014/11/05(Wed) 07:41:49
No.680
Google地図を追加した時、地図の切り替えで右上に出てくる青い枠の大きさや
フォントの大きさが変わるという問題がありましたが、
gsimaps.html に以下の2行を追加すると直ります。
<title>ルート地図</title>
<style type="text/css">
html,body { overflow:hidden;height:100%; }
*+html #map_canvas { height:expression(document.documentElement.clientHeight-30+'px'); } /* IE7 */
* html #map_canvas { height:expression(document.body.clientHeight-30+'px'); } /* IE6 */
div.olControlLayerSwitcher { width:200px!important; } ←追加
.layersDiv { font-size: 13px; } ←追加
テストページ：
http://anineco.nyanta.jp/test.html の gsimaps+google.html
ソースファイル（マウス右クリックで保存して下さい）：
http://anineco.nyanta.jp/gsimaps+google.html
Re: Google地図の追加 投稿者：
マーシー 投稿日：2014/11/05(Wed) 13:33:54
No.681
あにねこさん、こんにちは。
改良ありがとうございます。
まだ以前の gsimaps のままなので、これから少しずつ試して行こうと思います。
Re^2: Google地図の追加 投稿者：
ヤマトタケル 投稿日：2014/11/06(Thu) 07:30:11
No.682
Re^2: Google地図の追加 投稿者：
マーシー 投稿日：2014/11/07(Fri) 12:57:41
No.683
あにねこさん、こんにちは。
新バージョンgsimaps 試験的に書き換えに成功しました。
中心十字線、GOOGLEMAPも正常に切り替えできます。
ルート図とアイコンも別々にON/OFFできます。(参照先↑)
var url0 = param.url.replace('_i','_t'); //変数url0を定義し、アイコンkmlファイル名の語尾を換えて代入する
var trkLayer = new OpenLayers.Layer.Vector('ルート軌跡', { //トラックレイヤーを定義する
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: url0, //url は url0 にあります
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(trkLayer); //ルート軌跡のレイヤーを追加する
地図投影法が、旧コードから球面メルカトル替わったんですね。
ありがとうございました。
Re^3: Google地図の追加 投稿者：
あにねこ 投稿日：2014/11/08(Sat) 20:35:47
No.686
ベグマンアイコンの追加 投稿者：
マーシー 投稿日：2014/11/08(Sat) 17:52:04
No.684
あにねこさん、こんばんわ。
新バージョンにOverviewMapコントロールを加えてみました。
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.OverviewMap());
ところで質問なのですが、Overview 画面の地図のズームアウト比率は替えられるのでしょうか？
optionn があるみたいなのですが、難しくてわかりません。
また、Google地図にしたときにベグマンアイコン(ストリート人形)
を地図に入れることは可能でしょうか？
MaxZoomLebel: 15 の次に streetView.Control : true と入れたのですが、
エラーになったようで、地図は表示されませんでした。
ホームページ書換が終わったばかりで大変でしょうが、よろしくお願いします。
Re: ベグマンアイコンの追加 投稿者：
あにねこ 投稿日：2014/11/08(Sat) 20:32:12
No.685
Re^2: ベグマンアイコンの追加 投稿者：
マーシー 投稿日：2014/11/08(Sat) 20:48:52
No.687
あにねこさん、こんばんわ。
ご紹介して頂いたページは一瞬だけ見ました。頑張って訳してみます。
Google地図も既製にとらわれず、少しずつトライしてみようと思います。
返信して頂きありがとうございました。
Re^2: 、Overview 画面設定 投稿者：
マーシー 投稿日：2014/11/11(Tue) 12:59:04
No.688
あにねこさんこんにちは。
minRatio はオーバービューマップの解像度とマップの解像度の比率の最小値でデフォルトは8、maxRatio は最大値ででふぉるとは32だそうです。
mapOptions にnumZoomLebels 設定があったので、やってみたのですがあまりうまくいかないようです。
map.addControl(new OpenLayers.Control.OverviewMap({mapOptions: {numZoomLevels: 10}}));
書き方はあっているでしょうか？
また。GoogleMap もやってみているのですが、URLは絶対パスのみですか？
param.url = (param.url.slice(0, 5) == 'http:' ? '' : baseurl) + param.url;
の意味を教えていただけますか？
Re^3: 、Overview 画面設定 投稿者：
あにねこ 投稿日：2014/11/12(Wed) 19:18:44
No.692
マーシーさん、こんばんは。
> minRatio はオーバービューマップの解像度とマップの解像度の比率の最小値でデフォルトは8、maxRatio は最大値ででふぉるとは32だそうです。> mapOptions にnumZoomLebels 設定があったので、やってみたのですがあまりうまくいかないようです。> > map.addControl(new OpenLayers.Control.OverviewMap({mapOptions: {numZoomLevels: 10}}));> 書き方はあっているでしょうか？openlayers overviewmap でググるといろいろ出てきますが、
http://girona-openlayers-workshop.readthedocs.org/en/latest/controls/overview.htmlとかを見るとあっていそうな気がします。
> param.url = (param.url.slice(0, 5) == 'http:' ? '' : baseurl) + param.url;slice は文字列を切り出すJavaScript 関数です。
http://www.tohoho-web.com/js/string.htm#slice上記のJavaScripの文は、
param.url の0文字目から5文字分を切り出して、それが'http:' ならば、
param.url は http:〜 という文字列なので、絶対URLで、そのまま用います。
そうでなければ、param.url は相対URLとみなして、baseurl と param.url を連結します。
〜 ? 〜 : 〜 はC言語やJavaScript で使われる3項演算子です。
http://www.tohoho-web.com/js/operator.htm#condこの辺りの話は、JavaScriptの本を一度通読した方が理解が早いと思います。
なお、Googleマップでは、KMLファイルは絶対URLで与える必要があります。
これは、OpenLayers はクライエントサイドで地図レイヤとKMLレイヤを重ね合わせる
（したがって、KMLファイルがローカルにあっても良い）のに対して、
Googleマップでは、サーバで重ね合わせを行なうため、サーバから読み出せるURLに
KMLファイルを置く必要があるためです。
Re^4: Google 切替 投稿者：
マーシー 投稿日：2014/11/12(Wed) 22:01:41
No.693
あにねこさん、こんばんわ。
いろいろとありがとうございます。JavaScriptの本を2冊購入しました。
地理院地図から、Google地図に切り替えできるような試みをしています。（テスト5）
document.getElementById('google').onclick = function() {
url1 = "googlemap.html" + location.search.replace('lon','lng')
window.open(url1, '_blank',"width=640,height=510,resizable=yes");
};
<div style="float:left;margin-left:25px;"><input style="color:red" id="google" type="button" value="StreetView" /></div>
地図を操作して値が変わった場合、緯度経度は「中心点」で求められますが、
zoom の値はi に入っているのですか？
データの値などを引き継ぐのに、何かいい案があったらお願い致します。
Re^5: Google 切替 投稿者：
あにねこ 投稿日：2014/11/14(Fri) 23:57:34
No.694
マーシーさん、こんばんは。
なかなか、高度なことをやろうとされていますね。
OpenLayers で現在のズームレベルを知るには、getZoom という関数を使います。
gsimaps.html の中でも、使っています。
Re^6: Google 切替 投稿者：
マーシー 投稿日：2014/11/16(Sun) 20:47:33
No.695
あにねこさん、こんばんは。getZoom関数のアドバイスありがとうございました。
また行き詰まりました。アドバイスをお願いします。
document.getElementById('google').onclick = function() {
center = map.getCenter();
center.transform(proj_3857, proj_4326);
var lat1 = center.lat.toFixed(6);
var lon1 = center.lon.toFixed(6);
var zoom1 = map.getZoom().toFixed();
var url1 = param.url;
var url2 = "googlemap.html?"+"lat="+lat1+"&lng="+lon1+"&zoom="+zoom1+"&url="+url1;
までは、できましたが、ウィンドウサイズの取得はわかりませんでした。(参照↑)
よろしくお願いします。
var box = top.getDimension(); //たぶんこれがダメの原因
var width1 = box.width.toFixed();
var height1 = box.height.toFixed();
window.open(url2, '_blank', "width=width1,height=height1,resizable=yes");
};
Re^7: Google 切替 投稿者：
あにねこ 投稿日：2014/11/16(Sun) 22:05:15
No.696
マーシーさん、こんばんは。
JavaScript で現在のウィンドウサイズを取得する方法ですが、
これは私も正確なところは知らないので、
「JavaScript ウィンドウサイズ 取得」などをキーワードにして、
Google先生にご教授頂くしかないです(^^;)
古いIEとモダンブラウザで方法が違ったりして面倒なので、
jQuery の width や height 関数を使った方が簡単かも知れません。
Re^8: Google 切替 投稿者：
マーシー 投稿日：2014/11/17(Mon) 15:24:46
No.697
あにねこさん、こんにちは。
ｊQueryはまた今度勉強しておきます。
何とか形になりました。ありがとうございました。
StreetViewボタンを押せば、地図の大きさが変わっても、座標や縮尺が変わっても
まったく同じ場所のGoogle地図に切り替わりStreetViewを見ることができます。
document.getElementById('google').onclick = function() {
center = map.getCenter();
center.transform(proj_3857, proj_4326);
var lat1 = center.lat.toFixed(6);
var lon1 = center.lon.toFixed(6);
var zoom1 = map.getZoom().toFixed();
var url1 = param.url;
var url2 = "googlemap2.html?";
url2 = url2.concat("lat=",lat1,"&lng=",lon1,"&zoom=",zoom1,"&url=",url1);
var width1 = window.innerWidth;
var height1 = window.innerHeight;
var box1 = "width=" + width1 + ",height=" + height1 + ",resizable=yes";
window.open(url2, '_blank', box1);
};
<div style="float:left;margin-left:25px;"><input style="color:red" id="google" type="button" value="StreetView" /></div>
Re^8: Google 地図の改造について 投稿者：
マーシー 投稿日：2014/11/17(Mon) 16:28:55
No.698
あにねこさん、こんな感じでいいのでしょうか？
＜アイコンとトラックの分離>
var url0 = param.url.replace('_i','_t'); //変数url0を定義し、アイコンkmlファイル名の語尾を換えて代入する
var trkLayer = new google.maps.KmlLayer(url0, {
preserveViewport: true
});
trkLayer.setMap(map);
document.getElementById('trk').onchange = function() {
trkLayer.setMap(this.checked ? map : null);
};
<div style="float:left;"><input id="gps" type="checkbox" checked="checked" />
IconData</div>
<div style="float:left;"><input id="trk" type="checkbox" checked="checked" />
GPStrack</div>
Re^8: Google 地図の改造について 投稿者：
マーシー 投稿日：2014/11/17(Mon) 16:32:57
No.699
十字マークの画像がいいのがなかったです。
これで本当に正確な中心にあるのでしょうか？
<センターマーク>
var crs = null;
document.getElementById('cross').onchange = function() {
if (this.checked) {
var crosshair = {coords:[0,0,0,0],type:'rect'};
crs = new google.maps.Marker({
map: map,
icon: '../logo/cross.gif', //十字マーク画像ファイルの置き場所
shape: crosshair
});
crs.bindTo('position', map, 'center');
crs.setVisible(true);
} else if (crs) {
crs.setVisible(false);
crs.destroy();
}
}
<div style="float:left;margin-left:5px;"><input id="cross" type="checkbox" />中心マーク</div>
Re^9: Google 地図の改造について 投稿者：
あにねこ 投稿日：2014/11/17(Mon) 20:54:35
No.700
Re^10: Google 地図の改造について 投稿者：
マーシー 投稿日：2014/11/18(Tue) 11:36:35
No.701
Re^11: Google 地図の改造について 投稿者：
あにねこ 投稿日：2014/11/18(Tue) 13:34:09
No.702
マーシーさん、こんにちは。
Google地図で航空写真以外を表示しないようにすることはできると思います。
（少なくとも、最初に航空写真を表示させるようにするのは
MapType を TERRAIN から SATELLITE にするだけなので簡単です。）
先に紹介したブログでは、地理院地図を背景地図として表示させて、
その上にペグマンアイコンを乗せると streetview が立ち上がるんですが
（もちろん、航空写真の上に乗せてもOK）、
これが実現したい使い方ではないのでしょうか？
Re^12: Google 地図の改造について 投稿者：
マーシー 投稿日：2014/11/18(Tue) 14:10:13
No.703
あにねこさん、こんにちは。
私は、先月あのブログを見て、逆のことができないかと考えたのです。
でも、今度それに挑戦してみたいと思います。
いろいろとありがとうございます。
Re^13: Google 地図の改造について 投稿者：
あにねこ 投稿日：2014/11/18(Tue) 14:54:46
No.704
ブログご存知でしたか。逆ということは、
OpenLayers の中で streetview の機能を実現しようということでしょうか？
すみません、何を実現しようとされているのか、いまいち理解できていないので。
Googleマップ版ルート地図でも、地理院地図版ルート地図でやったように、
中心点の十字線をon/offできるようにして、wptとtrkのレイヤーを分けたい、
ということでしたら、streetview とは直接関係ない話ですね。
Re^14: Google 地図の改造について 投稿者：
マーシー 投稿日：2014/11/18(Tue) 15:51:43
No.705
３月にあにねこさんのホームページを発見したら、電子国土がなくなってしまいました。
それで地理院地図でと思ったのですが、わからなくていろいろやって現在に至っています。
Google地図で中央マークのオンオフと、アイコンを別表示するのもおもしろくて始めてしまいました。
ご紹介いただいたブログのコードは先月印刷してあり、偶然昨日昼から読み始めていました。
でも難しくて、プログラムの７割ぐらいはまだ理解できなくて放り出していました。
もうすこしがんばってみます。
これからもよろしくお願いします。
Re^15: Google 地図の改造について 投稿者：
あにねこ 投稿日：2014/11/18(Tue) 18:34:22
No.706
Re^16: Google 地図の改造について 投稿者：
マーシー 投稿日：2014/11/19(Wed) 08:46:39
No.707
あにねこさん、おはようございます。
すみません。
一晩考えたら、あにねこさん推薦の方法がベストだと思い直しました。
次は別のツリーに移動させて頂きます。
- WebForum -