googlemapsとjavascriptの勉強のため、google地図を表示させてマウスで地図をクリックすると、クリック位置にマーカーを表示するだけのプログラムを作っています。
この際、地図の上にマウスが乗っていると、マーカーがドラッグされている状態に見えると見た目が判りやすいと思ったのですが(googlemapsのマイマップで新規マーカーを置く時にそんなことやってたと思うんですけど)、どうもその方法がわかりません。
マウスカーソルの移動イベントを取って、マウスカーソルの位置に延々とマーカーを表示し続ければそれっぽく見えるかとも思いましたが、Firefoxだとそれっぽく見えますがIEだと処理に負担がかかるのか、動作がイマイチです。
なんとか解決方法が無いものでしょうか。
参考程度ですが、↓のような物です。
<div id="maps" style="width: 500px; height: 500px"></div>
~~~~~~~~~~~~~~~~~~~~
var maps = new GMap2(document.getElementById("maps"));
var ev1 = GEvent.addListener(maps,"click",function(overlay,latlng){
maps.addOverlay(new GMarker(new GLatLng(latlng.lat(),latlng.lng()),{draggable:drag}));
GEvent.removeListener(ev1);
GEvent.removeListener(ev2);
}
var ev2 = GEvent.addListener(maps, "mousemove",function(latlng){
maps.clearOverlays();
maps.addOverlay(new GMarker(latlng));
});
ちょっと漠然としていますが、よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
返答おそくなりましたが、
「地図の上にマウスカーソルを持って行くと、マウスカーソルがマーカーをドラッグしてるように見える」
は困難です。マウスカーソルの画像をGMAP内で任意の画像に変える機能は
現行APIバージョンでありません。
その代案として、マーカードラッグとマーカー画像変更を使って似たような
効果をねらっただけです。
No.2の回答で提示したサンプルは、地図上で、ストリートビューを表示させたい箇所を選ばせるコードの一部抜粋と簡略化したものです。
もともとは、GMAP内のGControlに人形のアイコン画像をおいて、それを
GMAP内で引きずると移動中の人形にかわり、止まると普通の人形になり、
そこでクリックすると、そこで確定して、その場所のストリートビュー
を出すというようなコードから抜粋しました。
仕組み把握しました。ありがとうございます。
なるほど、やはり難しい模様ですね。。。
色々調べてみて、それらしい設定も見当たらなかったので無理矢理組んでみましたが、どうもしっくりこなくて質問した次第でした。
現状では簡易な方法はなさそうですし、一旦〆させていただきます。
参考コード含め、何度もありがとうございました。
No.2
- 回答日時:
こんな感じなんですけど、わかりますか?
var SV_icon = new GIcon();
var SV_icon.image ="svmarker.png"; //マーカーの画像
var SV_icon.iconSize = new GSize(22,46);
var SV_icon.iconAnchor = new GPoint(11,46);
var markeropts = {draggable:true,clickable:true,icon:SV_icon};
SV_marker = new GMarker(map.getCenter(),markeropts);
GEvent.addListener(SV_marker, "dragstart", function() {
startpoint=SV_marker.getLatLng();
SV_marker.setImage("svmarker.png"); //マーカーの画像
});
GEvent.addListener(SV_marker, "drag", function() {
if (SV_marker.getLatLng().lng() > startpoint.lng()){
SV_marker.setImage("svwalk0r.png"); //右移動中マーカーの画像
}else{
SV_marker.setImage("svwalk0.png"); //左移動中マーカーの画像
}
});
GEvent.addListener(SV_marker, "dragend", function() {
SV_marker.setImage("svmarker.png"); //マーカーの画像
});
map.addOverlay(SV_marker);
この回答への補足
これは、
マーカーを最初から地図上に設置して、マーカーをドラッグをすると3つの[イベント]によってマーカーの画像が切り替わるプログラム、ということですよね?
この方法でどう実現するのかが想像ついていません。意図が違っているかもしれませんので、一度確認させてください。
やりたいことは、
マーカーも何もない地図があります。
地図の上にマウスカーソルを持って行くと、マウスカーソルは マーカーをドラッグしてる状態に見える(もしくはマウスカーソルの位置にマーカーがついてまわる。最初にこれをやってみていました。もしくはマウスカーソル自体がマーカーの画像になっているとか)。
地図の上でクリックをすると、その位置にマーカーが設置される。ドラッグしてた状態に見えたマウスカーソルは、デフォルトに戻る。
地図に設置された後のマーカーは draggable:true なのでドラッグして移動させてもOK。
ということなのですが。
この「地図の上にマウスカーソルを持って行くと、マウスカーソルがマーカーをドラッグしてるように見える」ようにしたく、実際にドラッグしている必要は無いです。
書いてみたら最初に投稿した内容と違ってる印象がありますね。。
何度もすみません。
No.1
- 回答日時:
MAPのmousemoveのイベントを拾いつづけるから、たいへんになるのです。
マーカーの方のイベントに着目して、
まず、マーカーはdraggable:true、clickable:trueで作っておきます。
そして、任意の場所にマーカーをおきます。
そして、マーカーの
ドラッグ開始のイベント:dragstart
ドラッグ中のイベント:drag
ドラッグ終了のイベント:dragend
のリスナー関数で
マーカー.setImage(マーカーの画像ファイル)
を使って、それぞれの時のマーカーの画像を変えてやるのです。
ずっとスムーズになるはずです。
もしマーカーを使いたくないなら、mapのカーソルを変える
方法もあります。こちらはMAPのオプション(
draggableCursor)
を使います。
map = new GMap2(document.getElementById("map"),{size:new GSize(640,480),draggableCursor:'move'});
ただし、この方法で指定できるカーソルは、CSSで規定されている
カーソルプロパティの種類のみで、オリジナルの .CUR をURI指定する
方法は、今のところ出来ないみたいです。
この回答への補足
ご回答ありがとうございます。
が、申し訳ありません、最初のマーカーを使う項目がよく理解できていません。
mousemoveでないとマウスカーソルの位置がわからないと思ったのですが、これに変わってdragイベントを利用するというのはどういう事なのでしょうか?
マーカーにドラッグイベントを受けられるようにすると(尚且つsetImageで画像を変更すると)、マーカーをドラッグする際に画像が変わる??ではないですよね・・すいません。
↓のような事をするように見受けられるのですが、、、
~~~~~~~~~~~~~~~~
var option = {draggable:true,icon:icon[0],clickable:true}
var marker = new GMarker(new GLatLng(適当),option);
maps.addOverlay(marker);
~~~~~~~~~~~~~~~~
var ev1 = GEvent.addListener(marker,"drag",function(){
marker.setImage('画像');
});
~~~~~~~~~~~~~~~~
APIのサンプルを見ながらなので、イベントを利用する方法がまだ理解できていないかもしれません。根本を勘違いしてたらすいません。
2点目の、カーソルを変える方法も調べてみましたが、指定のURI、、例えばgoogleが用意してるようなピンやマーカー等も使えないみたいですね。
スタイルシートでアイコンの変更もできないかと思いましたが、map上ではmapにスタイルが上書きされてしまってるみたいで上手くいきませんでした。
もうちょっと考えてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Google Maps Google Maps にお店の名前を表示する方法は? 2 2022/12/26 16:21
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Google Maps グーグルマップの道路表記について 4 2023/04/06 07:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Yahoo地図でマーカーを表示した...
-
Google Maps API v2 現在位置か...
-
Dreamweaver CS3で、太い赤字と...
-
Google Mapの表示について
-
GoogleMapAPI - デフォルト表示...
-
グーグルマップ(Googlemap)を...
-
google map の画面サイズを小さ...
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
ウインドウを毎回同じ位置、大...
-
Javascript_submit()完了後に処...
-
別フォームから戻ったときのイ...
-
「Cancel = True」とはどういう...
-
ウィンドウの2重起動を防止したい
-
[Java] Edgeでのアドレスバー非...
-
一定時間おきにアラームやポッ...
-
ポップアップウィンドウがブロ...
-
Excelでワードアートや図を常に...
-
スクリプトって、何ですか?ど...
-
PDFファイルを分割するマクロの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Yahoo地図でマーカーを表示した...
-
VBAでオブジェクトがありません...
-
【javascript】住所から郵便番...
-
WordのVBAについて
-
googlemapで複数条件絞り込みで...
-
GoogleMap のマーカーに数値を...
-
GoogleMapsでルート内の座標を...
-
逆ジオコーディングについて
-
Google Map Api 複数のマーカ...
-
Google マップにマーカーと同心...
-
GoogleMapお店の情報をJSONで取...
-
google map の画面サイズを小さ...
-
PHPで入力された住所で地図表示
-
googlemap api で複数マーカー表示
-
ホワイトボードに水性顔料マー...
-
spanの位置、サイズを取得したい
-
ビルダーの黄色マーカーの出し方
-
google map apiを使って自宅周...
-
googleマップのアイコン全表示
-
入力した住所の画面内でグーグ...
おすすめ情報