D3の地図を表示するjavascript関数をどのように作成しますか？

現時点では、マップ用にこのiframeが動作しています。D3の地図を表示するjavascript関数をどのように作成しますか？

<div style=" position: absolute; top: 200px; left: 508px; width:300px;max-width:100%;overflow:hidden;height:200px;color:red;"><div id="my-map-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>

私が最初にこの隠しを持っていると私は呼んで追加およびコールでそれを削除することができるような機能を持っていると思います。私は次のような文章を書こうとしています：

var mapIsOn = false; 
    showMap(_city, _state, _country){ 
     if(mapIsOn == false){ 
      svg.append("iframe") 
      ... add the features listed above 
      .attr("id","MAP") 
     }else{ 
      svg.selectAll("#MAP").remove(); 
      mapIsOn = false; 
     }

これを行う方法はありますか？私はdivを作成することは可能ですが、これまでこれで、私は多くの運がないと思っています。どんな助けでも本当にありがとう！

出典

2016-07-20 Anonymous

オンラインあなたの鍵を投稿することはありません。それを除く –

これを実現する方法はたくさんあります。これはおそらく最も簡単な方法です。マップを表示したいときは、表示なしを設定して削除することをお勧めします。

.nodisplay { 
 
    display : none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("#my-map-display").toggleClass("nodisplay"); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<button>Toggle map</button> 
 
<div id="my-map-display" class="nodisplay" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe> 
 

 
</body> 
 
</html>

出典

2016-07-20 17:59:13

D3の地図を表示するjavascript関数をどのように作成しますか？

答えて

関連する問題