Question

我正在尝试制作商店定位器，我在下拉菜单中遇到问题，我想要一个用户到商店距离的下拉菜单，例如1英里3英里10英里等等但是我无法获得一个下拉菜单来运行一个显示这些位置的功能我已经尝试了一些我在这里看过的例子

Calling javascript functions from drop down

但我无法让我的代码运行我正在尝试运行的代码是：

function list() {
  document.getElementById("myList").onchange = function() {
    var sheet=document.getElementById("myList").value;

    if(sheet == "one"){
      showPosition();
    }
    else if(sheet == "two"){
      showPosition2();
    }
    else if(sheet = "three"){
    }
    else{
    }
    return false
  };
}
window.onload = list;

当我选择菜单中的第一个选项时，我希望它运行的功能是：

function showPosition(position) {
  var locations = [
  ['store1', -2.063150, 52.516503, 4],
  ['store2', -2.064824, 52.518436, 5],
  ['store3', -2.068214, 52.519898, 3],
  ['store4', -2.068558, 52.512769, 2],
  ['store5', -2.070875, 52.510758, 1]
  ];

  var lon1 = position.coords.longitude* 0.0174532925;
  var lat1 = position.coords.latitude * 0.0174532925;
  var i = 0;

  while (i < locations.length)
  {
    x.innerHTML+= "<br>Distance " + calcDist(lon1, lat1, locations[i][1]*0.0174532925, locations[i][2]* 0.0174532925);
    i++;
  }     
}   
function calcDist(lon1, lat1, lon2, lat2)
{
  return Math.acos(Math.sin(lat1)*Math.sin(lat2) + 
    Math.cos(lat1)*Math.cos(lat2) *
    Math.cos(lon2-lon1)) * 3958;    
}

我正在使用的菜单是：

<ul id="dropdown">
<li> Choose theme
<ul> 
    <li id="stylesheet1" > <a href="#"> Default </a></li>
    <li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
    <li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
    <li id="stylesheet4" > <a href="#"> Theme 3 </a></li>

</ul>
</li>
</ul>

Answer 1

通过查看代码，我发现了一个主要错误。

将window.onload = list;更改为window.onload = list();

Demo - 显示了params的传递

var testPosition = {
        coords: {
            longitude: 1,
            latitude: 1
        }
    }

showPosition(testPosition);

下拉菜单运行功能不起作用

1 个答案: