Question

我有两个单选按钮。选中第一个时，我会显示一个谷歌地图，其中包含一些标记。我希望当我检查第二个radion按钮时，它会显示相同的地图，但没有标记。你能帮忙吗？

<div><input type="radio" name="reception" id="rad" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>

<div id="map" style=" display:none; 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 == 'livraison'){

                    document.getElementById('map').style.display  = 'block';
                }
                else{
                    //How to display the map without markers
                }

            }
        }

有地图api的回调函数：

function initMap() {

        var sp = {lat: 23.54565, lng: 11.453};
        var metro_a={lat:12.4545  , lng: 13.3148};
        var metro_n={lat:10.934329596  , lng: 10.323665372};
        var lieux=[
                    {
                        nom: "MT" ,
                        coordonnees:{lat: 11.93863, lng: 10.31413}
                    },
                    {
                        nom: "MA",
                        coordonnees:{lat:19.9361  , lng: 10.3148}
                    },
                    {
                        nom:"MN" ,
                        coordonnees:{lat:18.936  , lng: 10.323665372}
                    }
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: sp
        });


        //--------------------------------------------------------------
        for (var i = 0; i < lieux.length; i++) {
            var marker= new google.maps.Marker({
                position:lieux[i].coordonnees,
                nom:lieux[i].nom,
                map:map
            });

        }

PS：我想在两台收音机之间切换。如果选中livraison，则会显示没有标记的地图。如果选中了点，则会显示带有标记的地图

Answer 1

如果所选单选按钮的值为“point”，则显示标记，否则不显示：

var point = document.querySelector('input[name = reception]:checked');
if (point && point.value == 'point') {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < lieux.length; i++) {
    var marker = new google.maps.Marker({
      position: lieux[i].coordonnees,
      nom: lieux[i].nom,
      map: map
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

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">
  function initMap() {

    var sp = {lat: 23.54565,lng: 11.453};
    var metro_a = {lat: 12.4545,lng: 13.3148};
    var metro_n = {lat: 10.934329596,lng: 10.323665372};
    var lieux = [{nom: "MT",
        coordonnees: {lat: 11.93863,lng: 10.31413
        }
      },{
        nom: "MA",
        coordonnees: {lat: 19.9361,lng: 10.3148}
      },{
        nom: "MN",
        coordonnees: {lat: 18.936,lng: 10.323665372
        }
      }];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: sp
    });
    //--------------------------------------------------------------
    var point = document.querySelector('input[name = reception]:checked');
    if (point && point.value == 'point') {
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < lieux.length; i++) {
        var marker = new google.maps.Marker({
          position: lieux[i].coordonnees,
          nom: lieux[i].nom,
          map: map
        });
        bounds.extend(marker.getPosition());
      }
      map.fitBounds(bounds);
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<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')
          document.getElementById('map').style.display = "block";
          initMap();
        } else {
          console.log('cest une livraison')
          document.getElementById('map').style.display = "block";
          initMap();
        }
      }
    }
  }
</script>

Answer 2

在添加标记之前，查看选择了哪个单选按钮：

var selected = document.querySelector('input[name = "reception"]:checked').value;

if(selected === "livraison") {
    for (var i = 0; i < lieux.length; i++) {
        var marker= new google.maps.Marker({
            position:lieux[i].coordonnees,
            nom:lieux[i].nom,
            map:map
        });

    }
}

无标记加载Google地图

2 个答案: