• 締切済み

googleMapのGEvent.addListenerについて

GEvent.addListener()の第三引数のfunction内で、 メンバメソッドを呼び出したいと考えています。 コード的には以下です。 var hoge = function() { ～中略～ GEvent.addListener ( map, "moveend", function() { this.dispZoom(); this.dispCoordinatesCenter(); } ); ～中略～ } この場合、thisが示すのはmapになると考えているのですが、うまく回避する方法はないでしょうか？

みんなの回答

  • bobviv
  • ベストアンサー率50% (13/26)
回答No.1

thisで動くはずですけど...どんなエラーが出てますか？ ハンドラ内で this instanceof GMap2 を出力させた結果はどうなりますか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • イベントリスナーの部分を関数にしたい

    イベントリスナーの部分で、「load」以外に「change」も必要になったので関数にしたいのですが、 引数の関数の指定方法がわかりません。 どうすればいいのでしょうか。よろしくお願いします。 【イベントリスナーを関数にする前】 function hoge(){ this.view = function(){ var _this = this; window.addEventListener( 'load',function(){ _this.foo()}, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); 【やってみたこと】 function hoge(){ this.view = function(){ var _this = this; var func = function(){ _this.foo()}; this.addListener( 'window', 'load', func ); } this.addListener = function(elem,type,func){ elem.addEventListener( type,func, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view();

  • オブジェクトの中で呼び出される順番とデフォ引数？

    ・意味が分からないコードがあるので教えてください ■コード var arg; var obj = { 　hoge : function( arg ) { 　　var hoge = function(arg){ 　　　return function() { 　　　} 　　}(arg); 　　hoge(); 　} } ■質問 ・この時、obj.hoge(arg);と書いたら、どういう処理が走るのでしょうか？ ・初めに実行されるのは？ 無名関数部分？ それともhoge()？ ・hoge()を実行する際、引数指定していないので、引数は渡らない？

  • googleMapで情報ウィンドウの表示が崩れる

    お世話になります。 ＤＢに登録したマーカーデータを取り出して グーグルマップに表示するツールを作ったのですが、 マーカーをクリックしてインフォメーションウィンドウを表示すると 「吹き出し」の形が切れ目が入ったように崩れてしまいます。 またそこには取り出したデータを表示もするのですが、 ドラッグして反転させないと見えない状態です。（単に文字色が白？） 以下がプログラムの内容になりますが、何かわかることがありましたらご指摘願えないでしょうか？ よろしくお願い致します。 var map function startUp(){ map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.618, 139.7672), 10); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); map.enableDoubleClickZoom(); GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var mk = makeMarker(load.data[i].lat, load.data[i].lng, load.data[i].name); map.addOverlay(mk); } }); } function makeMarker(lat, lng, name){ var point = new GLatLng(lat,lng); var marker = new GMarker(point); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("緯度：" + lat + "<br>経度：" + lng + "<br>施設名：" + name); }); return marker; } 本当はわざわざ関数化することなく下のようにやりたいのですがエラーになるので上のようにしています。 var mk = new GMarker(new GLatLng(load.data[i].lat, load.data[i].lng)); map.addOverlay(mk);

  • googlemap api で複数マーカー表示

    複数のマーカー表示は最初できてたんですが、 住所から座標を取得してマーカーを複数表示ができません。。 <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //地図を作成 map.setCenter(new GLatLng(35.969115,139.372559), 8); //地図を表示（(中心の緯度,経度),縮尺） map.addControl(new GSmallMapControl()); //マップコントローラを付ける map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける map.addControl(new GScaleControl()); //スケールコントローラを付ける map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化 //マーカー追加プログラム function addMarker(lat,lng,html) { var geocoder = new GClientGeocoder(); geocoder.getLatLng ( lat, function(point) { var marker = new GMarker(new GLatLng(point,lng)); //マーカー生成 GEvent.addListener(marker,"mouseover",function(){marker.openInfoWindowHtml(html);});//マーカーにマウスが当たると情報ウィンドウを表示する map.addOverlay(marker); //マーカーをオーバレイ表示する } ); } //マーカー追加 addMarker("横浜市",'<p>html</p>'); addMarker("東京都",'<p>html</p>'); } } </script> </head> <body onload="load()" onunload="GUnload()"> 中略・・・ 初心者なもので、、、 ご回答お願いいたします。

  • googleMapについて

    現在フォトビューワーを作っております。 フリッカーからジオタグ付きの画像を取得し、最新から15枚をサムネイル表示。 サムネイルをクリックすると拡大画像が表示され、拡大画像をクリックすると、 ジオタグのグーグルマップが表示されるというものです。 問題は、拡大画像をクリックした際、マップの一部分が灰色になり、まともに表示されない場合があるのです。 ページを開く→サムネイルクリック→拡大画像クリック→残念マップ。 残念マップ→サムネイルクリック→拡大画像クリック→正常マップ。 一度マップを表示してから、サムネイルクリック→拡大画像クリック→の流れだと、マップは正常に表示されます。 サムネイルクリック→拡大画像クリック→サムネイルクリックの場合、次に表示されるマップは残念マップです。 調べていく中で.css({display:"none"});があると発生するという事も知り、色々と試したのですが、どうにも上手くいきません。 説明下手で申し訳ないのですが、どなたかご教示いただけないでしょうか。 よろしくお願いいたします。 // JavaScript Document var photoArray = new Array(); $(function(){ //alert("test"); var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=247631e9618453041df148893302e211&tags=sky&page=0&per_page=15&has_geo=true&extras=geo&format=json"; $.ajax({ url : searchURL, dataType : "jsonp", jsonp : "jsonFlickrApi" }); }); function jsonFlickrApi(data){ console.log(data); //alert("jsonFLickrApi:"+data.photos.photo); $(data.photos.photo).each(function(i) { //console.log(this.latitude,this.longitude); var geo = {lat:this.latitude, lng:this.longitude}; var imgTitle = {title:this.title}; //console.log(imgTitle.title); var file = "http://farm" + this.farm + ".static.flickr.com/" + this.server + "/" + this.id + "_" + this.secret + "_" + "z" +".jpg" //console.log(file); var thumbnail = "<img src='"+file+"' width='60' height='50' data-lat='"+geo.lat+"' data-lng='"+geo.lng+"' data-title='"+imgTitle.title+"' style='margin:-6px 6px 37px 14px;'>"; //console.log(thumbnail); $("#photoArray").css("height", Math.floor(photoArray.length)/5*110); var h = $("#photoArray").attr("height"); $("#photoArray p").append('<img src="images/photoBg.png" width="70" height="75" style="margin:-12px 0 18px 10px;" top: -' + h + 'px;">').fadeIn("slow"); $("#photoArray").append(''+thumbnail+'').fadeIn("slow"); }); //マウスオーバー時のサムネイルopacity $("#photoArray img").hover(function(){ $(this).stop(true).fadeTo("fast", 0.5);},function(){ $(this).fadeTo("fast",1); }); //サムネイルをクリックすると実行される処理 $("#photoArray img").live("click",function(){ //console.log($(this).data('lat'), $(this).data('lng'), $(this).data('title')); var img = $(this).attr("src"); var title = $(this).data('title'); //画像の座標を変数に入れる var latLng = new google.maps.LatLng($(this).data('lat'), $(this).data('lng')); var myOptions = {zoom: 14,center: latLng,mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("googleMap"),myOptions); var marker = new google.maps.Marker({position: latLng, map: map}); //console.log(latLng); $("#bigPhoto").fadeOut("slow",function(){ $("#bigPhoto").html("<img src='"+img+"' width='368' height='290'>" + '<p>' + title + '</p>').fadeIn("slow"); }); //console.log(title); $("#googleMap").fadeOut("slow").css({display:"none"}); }); $("#bigPhoto img").live("click",function(){ $("#bigPhoto").fadeOut("slow", function(){ $("#googleMap").fadeIn("slow"); }); }); }

  • グーグルマップについて教えてください。

    【やりたいこと】 グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか？ ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8); 　　 map.addControl(new GMapTypeControl()); 　　 map.addControl(new GLargeMapControl3D()); 　　 streetview = new GStreetviewOverlay(); 　　 map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() { 　　　　myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }

  • GoogleMap 住所から座標の取得

    住所から座標を取得し、マーカーを設置 情報ウインドウを設定したいのですが、想定している動きをしません 動かすと 1回目→3回目→1回目→3回目→2回目 といった順番でalertが表示されます 原因はclientGeocoder.getLatLng辺りじゃないかと思っているんですが、これを順番通りに動かすにはどのようにすればよいでしょうか var map; var shopName; var address; var tel; function changeFont(input) { if (GBrowserIsCompatible()) { //住所名取得 var point = document.getElementById('{!$Component.top.ad}').value.split(','); //地図を配置するオブジェクト取得 map = new GMap2(document.getElementById('map')); //拡大・縮小を行えるようにする map.enableScrollWheelZoom(); //ジオコード var clientGeocoder = new GClientGeocoder(); //マーカー設定 for (var i = 0; i < point.length; i++) { //shopName = shop[i]; address = point[i]; //tel = telpho[i]; alert("1回目 = " + address); clientGeocoder.getLatLng(point[i], shoMap); alert("3回目 = " + address); } } } function shoMap(point) { //中心設定 map.setCenter(point, 8); //マーカー var marker = new GMarker(point); map.addOverlay(marker); alert("2回目 = " + address); GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml("店名：" + shopName + "<br/>住所：" + address + "<br/>TEL：" + tel);}); }

  • googleマップAPIクリックイベント

    googleマップAPIで、 var marker = new Array(); for(i=0; i<10; i++){ marker[i] = new GMarker(ZAHYOU[i]); map.addOverlay(marker[i]); GEvent.addListener(marker[i], 'click', function(){alert(i);}); } というコードでは、１０カ所にきちんとマーカーは付けられますが、 クリックイベントではすべて「10」が表示されます。なぜでしょうか？ マーカーとクリックイベントを対応させるにはどうすればいいのでしょうか？ よろしくお願いいたします。

  • GoogleMapでxmlから10件のみ情報取得

    今、googlemapで、xmlに書き出されたデータをjavascriptで呼び出し、地図外に一覧を表示させています。 現在のスクリプトでは、xmlデータ全件取得されています。 マップ上のポイントは前件表示、一覧表示部分のみ10件のみ表示に変更させる場合の書き方がわかりません。 初心者なりに、色々とやってみたのですが、うまくいかず。。。 ご指導いただけると助かります。 ****************************************** <script type="text/javascript"> var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById('map')); ・・・ } GDownloadUrl('http://○○.jp/map.xml', function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); var shopList = document.getElementById('map_text'); ・・・ for (var i = 0; i < markers.length; i++) { var shop = markers[i].getAttribute('shop'); var text = markers[i].getAttribute('text'); ・・・ var marker = createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl); var sidebarEntry = createSidebarEntry(marker,shop, text); map.addOverlay(marker); shopList.appendChild(sidebarEntry); } }); } function createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl) { ・・・ ｝ function createSidebarEntry(marker, shop, text) { var shopList = document.createElement('div'); shopList.id = "map_text"; var maplist =shop + '<br/>' + text;　　←※ここで呼び出される情報を10件に限定したい shopList.innerHTML = maplist; GEvent.addDomListener(shopList, 'click', function() { GEvent.trigger(marker, 'click'); }); return shopList; } </script> ******************************************

  • Googlemap apiでFFとNNでマーカーの表示が出ないのですが、どこが間違っていますか？

    Googlemap でマーカーの吹き出しに指定のHtmlを表示するように書いたつもりなのですが、IEとオペラでは意図どうりに表示されるのですがFFとNNではマーカーが表示されません。 javascriptはあまり得意ではないのでわかりやすく説明して頂けると他助かります。 //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(43.05578, 141.353257), 15); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); kyaba =[ [141.353075, 43.053673, "ダミー", "ダミー2", "ダミー3"], [141.352919, 43.054167, "ダミー", "ダミー2", "ダミー3"] ]; for (i = 0; i < kyaba.length; i++){ point = new GPoint(kyaba[i][0], kyaba[i][1]); dada = "<p>" + kyaba[i][2] + "</p>" + "<p>" + kyaba[i][3] + "</p>" + "<p>" + kyaba[i][4] + "</p>"; createMarker(point, dada); function createMarker(point,msg){ var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(msg); }); } } } } //]]> </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する