スレッド：Google地図の追加
Google地図の追加 投稿者：マーシー 投稿日：2014/10/25(Sat) 08:06:47 home No.642
あにねこさん、おはようございます。

BaseLayerにGoogle地図の追加が出来ましたので報告します。

<title>ルート地図</title>の次に挿入する

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

国土地理院地図の次にGoogle地図を挿入
var gmap_t = new OpenLayers.Layer.Google("Google地図", {
type: google.maps.MapTypeId.TERRAIN,numZoomLevels:16
});
var gmap_s = new OpenLayers.Layer.Google("Google写真", {
type: google.maps.MapTypeId.SATELLITE,numZoomLevels:22
});

BaseLayerに地図を追加する。
map.addLayers([std, pale, gmap_t, gmap_s]);

どこかおかしな動きがする気がします。
最初にGoogle地図に切り替えたとき、一瞬衛星写真になります。
ミスの指摘をお願いします。

次は、中心の十字マークをOverLayに加えたいのですが、
何かいい方法はありませんか？
if (!map.getCenter()) {
map.setCenter(new OpenLayers.LonLat(param.lon, param.lat).transform(proj_4326, proj_900913), param.zoom);
}
を使って"＋"を書くだけでもいいかも。
Google Maps APIの他にもいろいろありますが、
マークの呼び出し方が難しくてよくわかりません。
地図と一緒に移動しないって言うのはかえって難しいのですか？
よろしくお願いします。
Re: Google地図の追加 投稿者：あにねこ 投稿日：2014/10/25(Sat) 22:43:29 No.644
マーシーさん、こんばんは。

> どこかおかしな動きがする気がします。
> 最初にGoogle地図に切り替えたとき、一瞬衛星写真になります。
> ミスの指摘をお願いします。

OpenLayersでGoogle地図を表示させたことはないのでわかりませんが、
http://y2web.net/blog/inet/web/google_maps_on_openlayers-2576/
などを見ても良さそうな気がします。地理院地図のレイヤーを外して、
Google地図だけにしても同じ症状ですか。

> 次は、中心の十字マークをOverLayに加えたいのですが、
> 何かいい方法はありませんか？

http://portal.cyberjapan.jp/
が中心の十字線をon/offする機能を実現しているので、
これのソースが参考になると思います。
Re^2: Google地図の追加 投稿者：マーシー 投稿日：2014/10/26(Sun) 07:18:22 home No.646
あにねこさん、おはようございます。
返信ありがとうございます。

Google地図だけにすれば問題はありません。
偶然ですが、ご紹介のアドレスは今回の作成に参考にさせて頂きました。
違和感の正体は、＋を押すと現れるレイヤー切替の青い四角の幅が変化するだとわかりました.
これは仕様のようですね。他の方のページも確認しました。
もし時間があるときに↑の参照先を確認して頂けたらありがたいです。

国土地理院地図のソースもゆっくり解析してみるつもりでいます。
お忙しい所、ありがとうございました。
Re^2: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/27(Mon) 15:41:57 No.648
こんにちは、あにねこさん。
地理院地図のソースはA4で37ページ分あり、関連しそうな部分は

すごい量です。

私にはまだ無理みたいです。すみません別の方法を考えてみます。
Re^3: 中心十字アイコンの追加 投稿者：あにねこ 投稿日：2014/10/27(Mon) 18:44:17 No.649
マーシーさん、こんばんは。
昔、地理院地図のソースを見て試しに作ったことがあるのを思い出しました。
No.543 の記事をご参照ください。ただし、on/off 機能はついていません。
掲示板上部のメニューから「ワード検索」を選んで、「十字線」を
キーワードにすると出てくると思います。
Re^4: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/28(Tue) 08:09:01 home No.650
あにねこさん、おはようございます。

中央十字マークできました。ありがとうございました。（参照↑）
画像もダウンロードさせて頂きました。
onoffはできたら報告します。
Re^4: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/28(Tue) 22:31:05 home No.651
画像(centercross.js)を作って(あにねこさんのを頂きました）、次のコードを挿入する。
<script type="text/javascript" src="centercross.js"></script>

map.addControl(new OpenLayers.Control.LayerSwitcher()); //の次に
map.addControl(new OpenLayers.Control.CenterCross({
crosslength: 32,
bold: 1
}));　//を追加する。

function crossOn(){
if (document.map.cross.checked = false) {
map.removeControl(new OpenLayers.Control.CenterCross);
} else {
map.addControl(new OpenLayers.Control.CenterCross({
crosslength: 32,
bold: 1
}));
}
}
<body></body>に次を入れる。
<div style="float:left;margin-left:5px;"><input id="cross" type="checkbox" onclick="crossOn" checked>:中心十字マーク</div>

今のところはうまくいきません。
function のコードがダメのようです。
基本ができていないので、間違いがあったら指摘をお願いできればありがたいです。
Re^5: 中心十字アイコンの追加 投稿者：あにねこ 投稿日：2014/10/28(Tue) 22:49:08 No.652
マーシーさん、こんばんは。
まず、centercross.js は画像ではなくて、JavaScript で書かれたプログラムです。
ボタン（id='cross'）を押して、ある function を起動したい場合は、

document.getElementById('cross').onclick = function() {
// ここにやりたいことを書く
}

のようなコードになります。
gsimaps.html の中に同じようなコードがあるので、
その後ろあたりに追加すれば宜しいかと。
この function の中で、ボタンの状態を調べたい場合は、
document.getElementById('cross').value
の値を見れば良いのではないかと思います。
Re^6: 中心十字アイコンの追加 投稿者：あにねこ 投稿日：2014/10/28(Tue) 22:52:11 No.653
間違えました。

> document.getElementById('cross').onclick = function() {

check button の on/off で function を起動するには、
onclick ではなく onchange ではないかと思います（うろ覚え）。
Re^6: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/29(Wed) 09:37:20 home No.654
あにねこさん、おはようございます。

>centercross.js は画像ではなくて、JavaScript で書かれたプログラムです。

すみませんでした。画像だと思い込んでいました。
道理で簡単過ぎると思ったんです。十字マークのクラス設定だったんですね。
一番大事なコードが書かれていました。

最所は十字マーク非表示で、作ってみました。
追加する事はできるのですが、十字マークが消えません。
どこが間違ってるのでしょうか？

document.getElementById('ccross').onchange = function() {
if (!document.getElementById('ccross').checked) {
map.removeControl(OpenLayers.Control.CenterCross);
} else {
map.addControl(new OpenLayers.Control.CenterCross({
crosslength: 32,
bold: 1
}));
}
}
Re^7: 中心十字アイコンの追加 投稿者：あにねこ 投稿日：2014/10/30(Thu) 01:13:19 No.656
マーシーさん、こんばんは。

> 最所は十字マーク非表示で、作ってみました。
> 追加する事はできるのですが、十字マークが消えません。
> どこが間違ってるのでしょうか？
>
> document.getElementById('ccross').onchange = function() {
> if (!document.getElementById('ccross').checked) {
> map.removeControl(OpenLayers.Control.CenterCross);
> } else {
> map.addControl(new OpenLayers.Control.CenterCross({
> crosslength: 32,
> bold: 1
> }));
> }
> }

removeControl の引数は、
new OpenLayers.Control.CenterCross
で返ってくるオブジェクトを渡すのだと思います。

十字線を表示
var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
map.addControl(obj);

↓

十字線を消去
map.removeControl(obj);

のような流れになると思います。
Re^8: 中心十字アイコンの追加 投稿者：ヤマトタケル 投稿日：2014/10/30(Thu) 08:37:46 home No.657
あにねこさん、マーシーさん、お早うございます。

横スレで失礼します。マーシーさんのリンクを見ました。
地理院地図とGoogleMapの両方見えますね。
自分としては十字線に興味があるのですが、航空写真入りで両方見えるのも便利と思います。

ぜひぜひ完成させてください。掲示板を楽しみにして覗いています。
Re^8: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/30(Thu) 09:12:43 home No.658
あにねこさん、おはようございます。

1) http://nanten.sakura.ne.jp/nyanta/js/centercross.js をダウンロードして、同一フォルダに入れる。
<script type="text/javascript" src="centercross.js"></script>を該当箇所に入れる。

2）<div style="float:left;margin-left:5px;"><input id="ccross" type="checkbox" >中心十字マーク</div>　　//最所は十字マーク非表示

3) document.getElementById('ccross').onchange = function() {
var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
if (document.getElementById('ccross').checked) {
map.addControl(obj); //十字線を表示
} else {
map.removeControl(obj); //十字線を消去
}
} 　//とした場合は、

□非表示 → ■表示 → □表示 → ■表示 となります。

var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});　　//をif文の外に出すと、

□非表示 → ■表示 → □非表示 → ■非表示　となります。

最初から十字線を表示させると、
■表示 → □非表示 → ■非表示 → □非表示　となります。

onchange でも onclick でも同じでした。これで満足すべきでしょうか？

ヤマトタケルさん、おはようございます。
ホームページ時々拝見しています。デザインがきれいですね。
あにねこさんのご指導力をお借りして、何とかやってみます。
Re^9: 中心十字アイコンの追加 投稿者：あにねこ 投稿日：2014/10/30(Thu) 23:38:07 No.659
マーシーさん、こんばんは。

> 3) document.getElementById('ccross').onchange = function() {
> var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
> if (document.getElementById('ccross').checked) {
> map.addControl(obj); //十字線を表示
> } else {
> map.removeControl(obj); //十字線を消去
> }
> } 　//とした場合は、

ここで定義した無名の関数は、チェックボタンを on/off するたびに
（onchange = 状態が変化するたびに）呼び出されます。
呼び出しと次の呼び出しの間では、変数 obj が保持されている必要があります。
関数の中で var obj とすると、その変数（ローカル変数）の寿命は関数が実行されている間だけです。
なので、次のようにする必要があると思います。

var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
document.getElementById('ccross').onchange = function() {
if (this.checked) {
map.addControl(obj); //十字線を表示
} else {
map.removeControl(obj); //十字線を消去
}
}

なお、this はこの関数の中では、document.getElementById('ccross')　を表します。
以上、こちらではテストしていないので違ってるかも知れませんが（その可能性大）、
お試しください。
Re^10: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/31(Fri) 09:30:49 home No.660
あにねこさん、おはようございます。
いろいろとおせわになっています。

テストページを作りました。

test1) var obj = を関数の手前に置く(今回の試案)
　<結果>　□無 → ■有 → □無 → ■無

test2) var obj = を関数の中に入れる
　 <結果>　□無 → ■有 → □有 → ■有

test3) var obj = をIF文の中に入れる
　　<結果>　□無 → ■有 → □有 → ■有

test4) var obj = を関数の手前に置き、一度作ってから消す
var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
map.addControl(obj); //十字線を表示
map.removeControl(obj); //十字線を消去
<結果>　□無 → ■無 → □無 → ■無

test5) var obj = を関数の手前に置き、表示させる
var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
map.addControl(obj); //十字線を表示
//チェックボックスはチェック済みにする
<結果>　■有 → □無 → ■無 → □無

remove.Controlした後は、関数がクリアされている気がします。
時間がありましたら、参照先のテストページの確認を、よろしくお願いします。
今気になっているのはつぎのブログです。
http://matsup.blogspot.jp/2014/07/gnssgps-openlayers.html
Re^11: 中心十字アイコンの追加 投稿者：あにねこ 投稿日：2014/10/31(Fri) 19:58:12 No.661
マーシーさん、こんばんは。
すみません、チェックボックスの on/off の状態を調べるのは、
value ではなくて、checked でした。
という訳で、次のようなコードになります。

【JavaScript部分】
var crs = null;
document.getElementById('cross').onchange = function() {
if (this.checked) {
crs = new OpenLayers.Control.CenterCross({
crosslength: 32,
bold: 1
})
map.addControl(crs);
} else {
map.removeControl(crs);
crs.destroy();
}
}

【html部分】
<div style="float:left;margin-left:5px;"><input id="cross" type="checkbox" />十字線</div>

テスト用のページを作成しました。
http://nanten.sakura.ne.jp/nyanta/test.html
の
gsimaps-cross-sw.html
をクリックしてお試しください。
Re^12: 中心十字アイコンの追加 投稿者：マーシー 投稿日：2014/10/31(Fri) 21:00:20 home No.662
あにねこさん、こんばんは。
貴重な時間を使わせて頂いてありがとうございます。

テストページを拝見しました。完璧です。
でも何が起こったかわからないので、これからゆっくり検証していきたいと思います。

//あにねこさん模範コード
var crs = null;
document.getElementById('cross').onchange = function() {
if (this.checked) {
crs = new OpenLayers.Control.CenterCross({
crosslength: 32,
bold: 1
})
map.addControl(crs);
} else {
map.removeControl(crs);
crs.destroy();
}
}

<div style="float:left;margin-left:5px;"><input id="cross" type="checkbox" />十字線</div>

//マーシー悪戦苦闘コード (test3)
document.getElementById('ccross').onchange = function() {
if (this.checked) {
var obj = new OpenLayers.Control.CenterCross({crosslength: 32, bold: 1});
map.addControl(obj); //十字線を表示
} else { if(obj){
map.removeControl(obj); //十字線を消去
}
obj=null;
}}

<div style="float:left;margin-left:5px;"><input id="ccross" type="checkbox" >中心十字マーク</div>

あにねこさんのおかげで無事完成することができました。
このすばらしい gsimaps をホームページに反映させたいと思います。
ありがとうございました。

- WebForum -