2016-04-03 4 views
0

クリックするとGoogleマップを所定の座標にパンするhrefを動的に追加しようとしています。以下のコードは、マップをパンするhrefリンクを作成しますが、最近作成されたサークルの位置にパンします。ユニークなGoogle Map latLngを非同期で動かすような動的なHREFを作成する

閉包されたIIFE内の現在の座標は保持されるが、そのような運がないことを望むならば、閉包panToCircleを追加した。私の最高の戦略は何だと思いますか?ありがとう、トン!

注:これはすべて非同期コールバックから連鎖され、応答がサーバーから送信されるたびにサークルが作成されます。

var text = 'Hello World!'; 
// Hoisting the panToCircle up here, as Chrome was giving me undefined ref errors when initializing it in linkToCircle. 
var panToCircle = function(){}; 
var rgb = [100,100,100]; 
createCircle(); 

function createCircle(){ 
    var color = 'RGB(' + rgb.toString() + ')';      
    var myCircle = initCircle(); 
    linkToCircle(); 

    function linkToCircle(){ 
     var a = document.createElement('a'); 
     a.innerHTML = text + "<br><br>"; 
     a.style.color = color; 

     panToCircle = function(){ 
      // Defining center in here, as putting a center in as an argument to the href function reclasses the center as a string, not a latLng 
      var center = myCircle.getCenter(); 
      (function panNow(cen){ 
       map.panTo(cen); 
      })(center); 
     } 

     a.href = 'javascript:panToCircle();' 
     document.getElementById('text-div').appendChild(a); 
     } 
} 

答えて

0

クールでは、本当に簡単な修正が機能しました。ちょっと戻ってから別のオプションを検討するだけでした。私は現在の座標から文字列をフォーマットし、それをhref値に連結しました。

function linkToCircle(){ 
     var a = document.createElement('a'); 
     a.innerHTML = text + "<br><br>"; 
     a.style.color = color; 

     panToCircle = function(latLng){ 
      alert(latLng) 
      var cen = {'lat': Number(latLng[0]), 'lng': Number(latLng[1])};    
      map.panTo(cen); 
     } 

     // Just had to do an eval-ish thing to get it to take the current coordinates by 
     // formatting the string correctly, as an array. I had tried something similar 
     // before, but it was rejecting the arguments as a comma-separated list. 
     var centerString = center.lat.toString() + ',' + center.lng.toString(); 
     a.href = 'javascript:panToCircle([' + centerString + ']);' 
     document.getElementById('text-div').appendChild(a); 

    } 

私の閉鎖の試みが上記の理由で失敗した理由について、お気軽にお答えください。閉鎖は私には新しいものです(私は一般的にjsに新しいです)、もっと学ぶのが大好きです。最初の投稿にクロージャ要素を説明する回答を受け入れます。ありがとう!

関連する問題