gmaps.js，找到最近的点 [英] gmaps.js, find the nearest point
本文介绍了gmaps.js，找到最近的点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一系列经度和纬度的点.接下来，我将所有点添加到地图中. 我需要解决方案/算法，以使用页面加载时的地理位置将用户移动到阵列中的最近点. (如果地理位置当然成功)
I have a array of point with latitude and longitude. Next, I add all points to my map. I need solution/algorithm to move user to the nearest point from my array using geoloation on page load. (if geolocation success of course)
推荐答案
这应该可以解决问题.我结合了HTML5地理位置以查找用户的当前位置和Haversine函数以计算距一组位置和用户当前位置的距离.这组位置是在JS数组位置"中定义的.
This should do the trick. I combined both HTML5 geolocation to find the user's current location and Haversine function to calculate distances from a set of locations and the user's current location. The set of locations is defined in the JS array 'locations'.
<!DOCTYPE html>
<html>
<head>
<title>Google Map Template with Marker at User's Position</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!-- Google Maps API -->
<script>
// set of locations represented by lat/lon pairs
var locations = [{lat:45, lon:-120}, {lat:44, lon:-121}, {lat:45.6, lon:-120.5}];
var map; // Google map object
// Initialize and display a google map
function Init()
{
// HTML5/W3C Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition( UserLocation, errorCallback,{maximumAge:60000,timeout:10000});
}
// Default to Washington, DC
else
ClosestLocation( 38.8951, -77.0367, "Washington, DC" );
}
function errorCallback( error )
{
}
// Callback function for asynchronous call to HTML5 geolocation
function UserLocation( position )
{
ClosestLocation( position.coords.latitude, position.coords.longitude, "This is my Location" );
}
// Display a map centered at the specified coordinate with a marker and InfoWindow.
function ClosestLocation( lat, lon, title )
{
// Create a Google coordinate object for where to center the map
var latlng = new google.maps.LatLng( lat, lon );
// Map options for how to display the Google map
var mapOptions = { zoom: 12, center: latlng };
// Show the Google map in the div with the attribute id 'map-canvas'.
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Place a Google Marker at the same location as the map center
// When you hover over the marker, it will display the title
var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: title
});
// Create an InfoWindow for the marker
var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow( { content: contentString } );
// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
// find the closest location to the user's location
var closest = 0;
var mindist = 99999;
for(var i = 0; i < locations.length; i++)
{
// get the distance between user's location and this point
var dist = Haversine( locations[ i ].lat, locations[ i ].lon, lat, lon );
// check if this is the shortest distance so far
if ( dist < mindist )
{
closest = i;
mindist = dist;
}
}
// Create a Google coordinate object for the closest location
var latlng = new google.maps.LatLng( locations[ closest].lat, locations[ closest].lon );
// Place a Google Marker at the closest location as the map center
// When you hover over the marker, it will display the title
var marker2 = new google.maps.Marker( {
position: latlng,
map: map,
title: "Closest Location to User: Distance is " + mindist + " km"
});
// Create an InfoWindow for the marker
var contentString = "<b>" + "Closest Location to User: Distance is " + mindist + " km" + "</b>"; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow( { content: contentString } );
// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
google.maps.event.addListener( marker2, 'click', function() { infowindow.open( map, marker2 ); });
map.setCenter( latlng );
}
// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
google.maps.event.addDomListener( window, 'load', Init );
</script>
<script>
// Convert Degress to Radians
function Deg2Rad( deg ) {
return deg * Math.PI / 180;
}
// Get Distance between two lat/lng points using the Haversine function
// First published by Roger Sinnott in Sky & Telescope magazine in 1984 ("Virtues of the Haversine")
//
function Haversine( lat1, lon1, lat2, lon2 )
{
var R = 6372.8; // Earth Radius in Kilometers
var dLat = Deg2Rad(lat2-lat1);
var dLon = Deg2Rad(lon2-lon1);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(Deg2Rad(lat1)) * Math.cos(Deg2Rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
// Return Distance in Kilometers
return d;
}
// Get Distance between two lat/lng points using the Pythagoras Theorem on a Equirectangular projection to account
// for curvature of the longitude lines.
function PythagorasEquirectangular( lat1, lon1, lat2, lon2 )
{
lat1 = Deg2Rad(lat1);
lat2 = Deg2Rad(lat2);
lon1 = Deg2Rad(lon1);
lon2 = Deg2Rad(lon2);
var R = 6371; // km
var x = (lon2-lon1) * Math.cos((lat1+lat2)/2);
var y = (lat2-lat1);
var d = Math.sqrt(x*x + y*y) * R;
return d;
}
</script>
<style>
/* style settings for Google map */
#map-canvas
{
width : 500px; /* map width */
height: 500px; /* map height */
}
</style>
</head>
<body>
<!-- Dislay Google map here -->
<div id='map-canvas' ></div>
</body>
</html>
这篇关于gmaps.js，找到最近的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
