Question

我有两个功能，我想结合在一起。第一个函数是一个Ajax脚本，它将通过ID调用位置并将结果返回到

div id =＆＃34; showLocation＆＃34;

echo '<input type="button" name="submitLocation" id="submitLocation" value="show location" onclick="showLocation('.$row['ID'].'); return false;" />';

echo '<div id="showLocation"><b></b></div>';

第二个功能是触发谷歌地图，让它知道要在地图上显示的位置。

 <input type="button" value="Geocode" onclick="codeAddress()">

显示位置功能

function showLocation(str) {
  if (str=="") {
    document.getElementById("showLocation").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("showLocation").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","viewLocation.php?q="+str,true);
  xmlhttp.send();
}

代码地址功能

function codeAddress() {
  var address = document.getElementById('showLocation').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });

Answer 1

<input type="button" value="Geocode" onclick="GeocodeClick()">

创建一个函数来调用2个函数。

function GeocodeClick(){
        showLocation(str);
        codeAddress(); 
}

Answer 2

您应该能够使用这些功能创建一个单独的功能。

function geoLocationCombo(str){
    showLocation(str);
    codeAddress();
}

虽然您也可以同时创建一个功能。

 function performGeolocationCheck(str) {

     if (str == "" || !str) {
         document.getElementById("showLocation").innerHTML = "";
         return;
     }

     if (window.XMLHttpRequest) {
         // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp = new XMLHttpRequest();
     } else { // code for IE6, IE5
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             var address = xmlhttp.responseText;
             geocoder.geocode({
                     'address': address
                 }, function (results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                         map.setCenter(results[0].geometry.location);
                         var marker = new google.maps.Marker({
                             map: map,
                             position: results[0].geometry.location
                         });
                     } else {
                         alert('Geocode was not successful for the following reason: ' + status);
                     }
                 }
             }
             xmlhttp.open("GET", "viewLocation.php?q=" + str, true);
             xmlhttp.send();
         }

我的朋友只是一个简单的例子，因为组合值得展示。

填充工具：

if (!document.addEventListener)
{
  document.addEventListener=function(type,fn){
        document.attachEvent("on"+type,fn);
      };
}

Answer 3

上面的好答案我只是想添加一些你可能想要记住的东西。我假设你基于这个问题对这种事情有些新意。如果没有，也许这将为其他人提供参考。创建可以调用更多函数的单个函数称为嵌套。嵌套函数是使程序更易于遵循的常用技巧。例如，设置功能可以调用设置中涉及的各种其他功能。它可以帮助保持流程在一起。

以上答案是正确的，但重要的是要注意将来参考，您可能遇到范围问题或需要记住将变量传递给两者。

当您对此类代码进行编码以包含两个函数（嵌套）时，您可以为堆栈添加一定的复杂性和额外的工作。根据语言的不同，这可能意味着您需要添加额外的垃圾回收调用。

function geoLocationCombo(str){
    showLocation(str);
    codeAddress();
}

例如，您可以在嵌套时存储内部局部变量：

function geoLocationCombo(str){
    location l = showLocation(str);
    codeAddress(l);
}

Answer 4

您还可以使用addEventListener或attacEvent。

<script>
// just to check if button exists
if (document.getElementById("submitLocation")) {
var submitLocation = document.getElementById("submitLocation");
if (!submitLocation.addEventListener)
{
    // add event for IE 9 below
    submitLocation.attachEvent('onclick', function () {
        showLocation(str);
        codeAddress(); 
    });
} esle {
    submitLocation.addEventListener('click', function () {
        showLocation(str);
        codeAddress(); 
    });
}
}
</script>


<input type="button" id="submitLocation" value="Geocode" onclick="GeocodeClick()">

只需单击即可执行两项功能

4 个答案: