Question

我一直在完成Creating a Store Locator with PHP, MySQL & Google Maps教程。该教程的作者使用下拉<select>半径值列表进行搜索。我希望有一系列的单选按钮，而不是这个列表，搜索半径选项与它们相关联。

我有按钮，但它们没有按照我预期的方式运行 - 当我点击按钮时，按钮的半径值似乎没有被添加到函数searchLocationsNear中。（第一个按钮的半径值传递给函数ok。）

我认为由于函数的第一部分是clearLocations()，这意味着将删除任何值radiusSelect并将其替换为单选按钮中的新数字。

有人可以告诉我，我需要在哪里做这项工作吗？

由于

功能的Javascript：

function searchLocationsNear(center) {
     clearLocations();

     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'xml_output.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address2");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createOption(name, distance, i);
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
       locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
      });
    }

搜索区域的html：

<body>
<div class="container">
        <input type="text" id="addressInput" size="10"/>
        <label class="radio-inline"><input type="radio" name="radio" id="radiusSelect" value="1">1 miles</label>
        <label class="radio-inline"><input type="radio" name="radio" id="radiusSelect" value="10">10 miles</label>
        <label class="radio-inline"><input type="radio" name="radio" id="radiusSelect" value="30">30 miles</label>
        <input type="button" class="btn btn-default" onclick="searchLocations()" value="Search"/>
</div>

</body>

Answer 1

ID必须是唯一的，但您多次使用相同的ID radiusSelect
您必须遍历所有按钮，检查当前按钮的checked - 属性是否为true，何时将radius设置为按钮的value：

 var radius = ( function(n,r){
                  var b=document.getElementsByName(n);
                  for(var i=0;i<b.length;++i){
                    if(b[i].checked)return b[i].value;
                  }
                  return r;
                }
                ( 'radio',//name of the buttons
                  1//default-radius
                ));

使用单选按钮更改函数中的参数

1 个答案: