Question

我有一个地理位置脚本，当用户点击＆＃34;给我指示＆＃34;按钮＆＃34; .get-directions＆＃34;，这很好用。

<div class="dirBtn">10 Street Road, Suburb, Country</div>
<!-- css -->
<style>
p.warning { color: red; }
input.manual-location { width: 95%; font-size: 1.2em; padding: 5px; }
.no-geolocation { display: none; }
.get-directions { background: #000; padding: 8px 13px; color: #ffffff; font-size: 16px; font-weight: bold; border-radius: 6px; margin: 0 auto 0 auto; text-decoration: none; clear: both; display: block; text-align: center; cursor:pointer; width:80%; }
    .get-directions:hover { text-decoration:none;  color: #ffffff; background:#333; font-weight: bold; }
.dirBtn { visibility:hidden; }
</style>

<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>

var gmap = $('.dirBtn').text();


$(document).ready(function () {

    var startingLocation;
    var destination = gmap.replace(/\s/g,"+")

    $('a.get-directions').click(function (e) {
        e.preventDefault();

        // check if browser supports geolocation
        if (navigator.geolocation) {

            // get user's current position
            navigator.geolocation.getCurrentPosition(function (position) {

                // get latitude and longitude
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;
                startingLocation = latitude + "," + longitude;

                // send starting location and destination to goToGoogleMaps function
                goToGoogleMaps(startingLocation, destination);

            });
        }

            // fallback for browsers without geolocation
        else {

            // get manually entered postcode
            startingLocation = $('.manual-location').val();

            // if user has entered a starting location, send starting location and destination to goToGoogleMaps function
            if (startingLocation != '') {
                goToGoogleMaps(startingLocation, destination);
            }
                // else fade in the manual postcode field
            else {
                $('.no-geolocation').fadeIn();
            }

        }

        // go to Google Maps function - takes a starting location and destination and sends the query to Google Maps
        function goToGoogleMaps(startingLocation, destination) {
            window.location = "https://maps.google.com/maps?saddr=" + startingLocation + "&daddr=" + destination;
        }

    });

});


</script>
<div class="no-geolocation">
<p class="warning">Your browser does not support Geolocation. Please enter             your postcode and click the button again.</p>
<input type="text" placeholder="Enter postcode or address" class="manual-location">
</div>
<a class="get-directions show" target="_blank">Give me directions</a>

我想做的是把＃34;给我指示＆＃34;按钮/链接在不同的页面上：

实施例

<a href="pagename/pagewiththescript" class="get-directions show" target="_blank">Give me directions</a>

并修改脚本以便在页面加载时立即启动，因为我没有编写地理位置脚本我只需要一只手将其转换为＆＃34;点击＆＃34;到一个＆＃34;页面加载＆＃34;。

我希望我能够解释清楚，随便提出任何问题。

Answer 1

要以多种方式在多个页面中使用此逻辑，您应该将代码分解为自己的函数。这样您就不必复制任何代码。

在原始html文件中将其更改为：

$(document).ready(function() {

  $('a.get-directions').click(function(e) {
    e.preventDefault();
    var gmap = $('.dirBtn').text();
    initMap(gmap); 

  });

});

在单独的.js文件中，声明您的功能：

function initMap(gmap) {
  var startingLocation;
  var destination = gmap.replace(/\s/g, "+")
    // check if browser supports geolocation
  if (navigator.geolocation) {

    // get user's current position
    navigator.geolocation.getCurrentPosition(function(position) {

      // get latitude and longitude
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      startingLocation = latitude + "," + longitude;

      // send starting location and destination to goToGoogleMaps function
      goToGoogleMaps(startingLocation, destination);

    });
  }

  // fallback for browsers without geolocation
  else {

    // get manually entered postcode
    startingLocation = $('.manual-location').val();

    // if user has entered a starting location, send starting location and destination to goToGoogleMaps function
    if (startingLocation != '') {
      goToGoogleMaps(startingLocation, destination);
    }
    // else fade in the manual postcode field
    else {
      $('.no-geolocation').fadeIn();
    }

  }
}
// go to Google Maps function - takes a starting location and destination and sends the query to Google Maps
function goToGoogleMaps(startingLocation, destination) {
  window.location = "https://maps.google.com/maps?saddr=" + startingLocation + "&daddr=" + destination;
}

将.js文件链接到需要访问这些功能的所有文档

在新页面的head标记中。

<script>
   $(function(){
      var gmap = 'someValue';
        initMap(gmap); 

   );
</script>

jQuery - 更改脚本以在页面加载时加载

1 个答案: