Question

我正在尝试使用地理位置。我正在使用HTML和javascript来执行此操作。我想要做的是在获得用户的位置后，它将打开一个新标签，该标签将转到显示方向的谷歌地图。起点是用户的位置，已经给出了终点。我在Google地图网址中使用了saddr和daddr。我正在使用Chrome浏览器进行测试，我已经允许获取我的位置。

这是我的代码

对于HTML

 <span class="glyphicon glyphicon-road" id="getdir1" onclick="getLocation()" style="font-size:15px;"> Get Direction1</span>

 <span class="glyphicon glyphicon-road" id="getdir2" onclick="getLocation()" style="font-size:15px;"> Get Direction2</span>

 <span class="glyphicon glyphicon-road" id="getdir3" onclick="getLocation()" style="font-size:15px;"> Get Direction3</span>

<p id="geo-error"></p>

这是我的javascript LocationProvided是我的终点的地址。我手动编码了。

<script>
    var x = document.getElementById("geo-error");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        var latlon = position.coords.latitude + "," + position.coords.longitude;

        $("#getdir1").click() = function(){ 
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided1");
        }

        $("#getdir2").click(function(){
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided2");
        });

        $("#getdir3").click(function(){
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided3");
        });

    }

    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }

</script>

我的问题是当我第一次点击它时会打开一个窗口，当我再次点击它时会打开两个显示位置的窗口。我很困惑为什么它在第二次点击时同时打开两个窗口？

Answer 1

您可以使用Jquery off取消以前的处理程序。

http://api.jquery.com/off/

.off（）方法删除附加的事件处理程序。对（）。

我经常使用它来避免堆叠处理程序的问题，因为多次函数调用一次又一次地附加相同的处理程序。

示例：

$(myElem).off("click").on("click", function (evt) {...});

小心不要删除myElem

其他插件的现有处理程序

Answer 2

问题是您通过onclick和$（＆＃39;元素＆＃39;）绑定点击事件。click（）

我修改你的代码是为了通过将元素传递给函数来简化业务，你甚至不需要jQuery。请检查并告诉我

＆＃13;

var x = document.getElementById("geo-error");

function getLocation(address) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) { //call back success
      var latlon = position.coords.latitude + "," + position.coords.longitude;
      window.open('http://maps.google.com/maps?saddr=' + latlon + '&daddr=' + address)
    }, function(error) { //call back error
      switch (error.code) {
        case error.PERMISSION_DENIED:
          x.innerHTML = "User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML = "Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML = "The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML = "An unknown error occurred."
          break;
      }
    });
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

＆＃13;

 <span class="glyphicon glyphicon-road" id="getdir1" onclick="getLocation('LocationProvided1')" style="font-size:15px;"> Get Direction1</span>

<span class="glyphicon glyphicon-road" id="getdir2" onclick="getLocation('LocationProvided2')" style="font-size:15px;"> Get Direction2</span>

<span class="glyphicon glyphicon-road" id="getdir3" onclick="getLocation('LocationProvided3')" style="font-size:15px;"> Get Direction3</span>

<p id="geo-error"></p>

＆＃13;

Answer 3

发现了我的错误

我添加.off（'click'）就像@Christophe Roussy所说的那样，而且在我的window.open()中应该有一个名称参数。

window.open(url, name)每当我拨打网址时，它都会转到我放的NAME。因为我放了一个NAME参数，它将覆盖它打开的窗口的URL。

我输入了相同的名称值。

使用javascript打开一个新窗口（谷歌地图），删除以前的事件处理程序

3 个答案: