Question

现在，我为地图设计了这个iframe。

    <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，但到目前为止，我没有太多运气。任何帮助都会非常感激！

Answer 1

有很多方法可以实现这一目标。这可能是最简单的方法。想法是设置display none并在我们想要显示地图时将其删除。

.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>

你如何编写一个在D3中显示地图的javascript函数？

1 个答案: