Question

我想通过Google API显示谷歌地图，但我希望只有当用户选择某个无线电输入时才会显示地图。

我不希望默认显示地图。我想在选中“Livraison”或“Point de reception”时显示它。

到目前为止，这是我的代码：

<div><input type="radio" name="reception" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>
<div id="map" style="height: 300px; border: 1px solid red;"></div>

<script type="text/javascript">
    window.onload=function(){
    var receps=document.querySelectorAll('[name=reception]');
        //console.log(document.querySelectorAll('[name=reception]'))

        for (var i = 0; i < receps.length ; i++)
        {
            receps[i].onclick=function(e){
                if(e.target.value == 'point'){
                    console.log('cest un point')
                }
                else{
                    console.log('cest une livraison')

                }

            }
        }

    }
</script>

<script type="text/javascript">
    function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
</script>
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=THE_KEY&callback=initMap">
    </script>

你能帮忙吗...

Answer 1

将map div设置为display: none。
选中单选按钮时，将div设置为display: block并调用initMap()

proof of concept fiddle

选择单选按钮之前：

：

代码段

#map {
  height: 100%;
  display: none;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div><input type="radio" name="reception" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>
<div id="map" style="height: 300px; border: 1px solid red;"></div>

<script type="text/javascript">
  window.onload = function() {
    var receps = document.querySelectorAll('[name=reception]');

    for (var i = 0; i < receps.length; i++) {
      receps[i].onclick = function(e) {
        if (e.target.value == 'point') {
          console.log('cest un point')
          document.getElementById('map').style.display = "block";
          initMap();
        } else {
          console.log('cest une livraison')
          document.getElementById('map').style.display = "block";
          initMap();
        }
      }
    }
  }
</script>

<script type="text/javascript">
  var map;

  function initMap() {
    var uluru = {
      lat: -25.363,
      lng: 131.044
    };
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

单选按钮显示谷歌地图

1 个答案: