I'm currently in the process of redoing my company's website. It would be really cool to, as soon as someone loads any page of our new site, display the location that is either closest to them, or within the business' service radius (±20mi) in the top bar beside a location pinpoint icon. I've been searching for a few days now about how to find a way to make this possible, and JavaScript seems to be the only way to accomplish this. I'm new to JS, so I'm not sure of the best way to accomplish it.
I've been looking into the Geolocation JS functionality, but I cannot get it to work for the life of me. Here is what I have so far:
var location = document.getElementById("nearestLocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
location.innerHTML = "Geolocation is not supported by this browser.";
}
}
function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
if (dist > 1) {
dist = 1;
}
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist
}
var data = [{
"lat": "36.5983825",
"lng": "-82.1828577",
"location": "Bristol, VA"
}, {
"lat": "36.7053664",
"lng": "-81.999551",
"location": "Abingdon, VA"
}, {
"lat": "35.9120595",
"lng": "-84.0979276",
"location": "West Knoxville, TN"
}, {
"lat": "35.8718708",
"lng": "-83.5642387",
"location": "Sevierville, TN"
}];
var html = "";
var poslat = position.coords.latitude;
var poslng = position.coords.longitude;
for (var i = 0; i < data.length; i++) {
// if this location is within 0.1KM of the user, add it to the list
if (distance(poslat, poslng, data[i].lat, data[i].lng, "K") <= 0.1) {
html += "<li>Nearest Location: <i class='icon-location'></i>" + data[i].location + "</li>";
}
}
$('#nearestLocation').append(html);
<html>
<body>
<head>
</head>
<button onclick="getLocation()">Find Your Local Honey Do</button>
<div id="nearestLocation"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</body>
</html>
This is my attempt at fusing:
https://www.w3schools.com/html/html5_geolocation.asp
and:
How to find nearest location using latitude and longitude from a json data
I've tried to use the info found on the following sites as well, but to no avail:
https://diveintohtml5.info/geolocation.html
How to display the nearest latitude and longitude to my location using javascript?
Most of the stuff I can find either only pulls the info and doesn't show me how to change info based upon the result, displays a map, or is broken and doesn't work
We have 14 locations, and getting their Long/Lat is not a problem.. It's getting the visitor's location either on-load or on-click. Retaining this info would be cool via cookies after they click on it, but it's not necessary. I just want to be able to show them the closest location to them, or make it a link directly to the location's page.
The internet has not proven helpful in helping me accomplish this.
I am aware of the ability to use PHP IP Recall to get an idea of location, but that's not precise enough for our liking, especially with mobile phones, when 70% of our web traffic comes from mobile devices.
Any assistance that can be provided will be greatly welcome!
Aucun commentaire:
Enregistrer un commentaire