こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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 );
}

投稿日時 - 2018-07-16 16:25:31

QNo.9518822

暇なときに回答ください

質問者が選んだベストアンサー

補足への回答です。
コードを見ただけなので間違ってたらすみません。
結論から、
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地点"})).bindInfoWindow("<a href=''>赤坂A地点</a>"));
markers.push((new Y.Marker(new Y.LatLng(35.67024139121164,139.72727687380439),{title:"赤坂B地点"})).bindInfoWindow("<a href=''>赤坂B地点</a>"));
markers.push((new Y.Marker(new Y.LatLng(35.63223075430667,139.88597781679755),{title:"浦安A地点"})).bindInfoWindow("<a href=''>浦安A地点</a>"));

ymap.addFeatures(markers);
}

ただ、そこまで1行にまとめる必要があるのかと思いました。
あまり長いと後で読みにくいですし、かっこが多く何がどこにかかっているのかわかりにくくなります。
もちろん一行で書いた方が分かりやすい場合もありますが、引数が増えると自分でも良くわからなくなると思います。
下記のよういろんなパターンで書けるのは分かるでしょうか。読みやすい方がいいかとも思いました。
window.onload = function(){
var ymap = new Y.Map("map");

ymap.drawMap(new Y.LatLng(35.68132732438393,139.76650149843817), 6,"map");

var markers = [];

var ym1 = (new Y.Marker(new Y.LatLng(35.674756131624456,139.73189027331),{title:"赤坂A地点"})).bindInfoWindow("<a href=''>赤坂A地点</a>");
markers.push(ym1);
var ym2 = new Y.Marker(new Y.LatLng(35.67024139121164,139.72727687380439),{title:"赤坂B地点"});
ym2.bindInfoWindow("<a href=''>赤坂B地点</a>");
markers.push(ym2);
//一行なら
markers.push((new Y.Marker(new Y.LatLng(35.63223075430667,139.88597781679755),{title:"浦安A地点"})).bindInfoWindow("<a href=''>浦安A地点</a>"));

ymap.addFeatures(markers);
}

究極的には下記のようにもっと短縮できると思いますが、分かりにくいですよね。
window.onload = function(){
var ymap = new Y.Map("map");

ymap.drawMap(new Y.LatLng(35.68132732438393,139.76650149843817), 6,"map");

var markers = new Array((new Y.Marker(new Y.LatLng(35.674756131624456,139.73189027331),{title:"赤坂A地点"})).bindInfoWindow("<a href=''>赤坂A地点</a>"),(new Y.Marker(new Y.LatLng(35.67024139121164,139.72727687380439),{title:"赤坂B地点"})).bindInfoWindow("<a href=''>赤坂B地点</a>"),(new Y.Marker(new Y.LatLng(35.63223075430667,139.88597781679755),{title:"浦安A地点"})).bindInfoWindow("<a href=''>浦安A地点</a>"));

ymap.addFeatures(markers);
}

かっこが多すぎて位置が間違ってたらごめんなさい。
Visual Studio Codeなどのエディタを使うとそういうミスも減ると思います。

投稿日時 - 2018-07-20 21:00:26

お礼

ご回答くださり誠にありがとうございます。

早速試してみたのですが、いずれも動作しませんでした。
Yahoo! JavaScriptマップAPIに用意されているbindInfoWindow()は特殊なんですかね。

おっしゃる通り、1行でまとめる必要はありませんが、大変勉強になりました。
ただ、コードをまとめる際にはごちゃごちゃしないようほどほどにしたいと思います。

togurin様には貴重なお時間をお付き合いくださり大変感謝しております。
おかげさまで期待通りのものが実装でき、またいろいろ勉強することもできました。

この度は本当にありがとうございました。

投稿日時 - 2018-07-21 10:35:49

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

Yahoo! JavaScriptマップAPIのことは全くわからないので検討違いかもしれませんが、そのあたりのエレメントにaddEventListenerをつけることは難しいのでしょうか?うまく取得できるのであれば使えそうな気がしますがいかがでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

投稿日時 - 2018-07-19 00:08:07

補足

bindInfoWindowメソッドというものが用意されていたのでそれを使って自己解決しました。

ただ、どうしてもmarkers.push()にbindInfoWindow()を加えて一文にすることができず、冗長になっています(そもそも知識不足でこれらを一文にまとめられるのかどうかもわかっていません……)。

どなたかこれをまとめられる方がいましたら、お手すきの時にご教示いただけたら幸いです。

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地点"}));

markers[0].bindInfoWindow("<a href=''>赤坂A地点</a>");
markers[1].bindInfoWindow("<a href=''>赤坂B地点</a>");
markers[2].bindInfoWindow("<a href=''>浦安A地点</a>");

ymap.addFeatures(markers);
}

投稿日時 - 2018-07-20 17:33:22

お礼

ご回答ありがとうございます!

ご提示くださったページなども拝見しつつ、あれこれ試しているのですが、未だうまく動作していません。

JavaScriptの知識が完全に不足しているので、根本から勉強し直します。

この度はありがとうございました。

投稿日時 - 2018-07-20 09:50:26