地理位置示例代码查找我附近的特定商店 HTML 5
Posted
技术标签:
【中文标题】地理位置示例代码查找我附近的特定商店 HTML 5【英文标题】：Geolocation example code find specific stores nearby me HTML 5 【发布时间】：2014-08-15 10:09:32 【问题描述】：知道使用 Geolocation API 查找我所在位置附近的商店吗？一个示例代码应该没问题，然后我会从那里继续。
【问题讨论】：
【参考方案1】：您可以通过地理定位 API 获得您当前的位置。
然后你将经度和纬度连同搜索查询一起提供给谷歌地图，谷歌地图会返回给你地图，以及你必须放置标记位置的位置：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Reports</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="google" value="notranslate" />
<meta name="application-name" content="GeoLocator" />
<meta name="description" content="HTML5's approach to email" />
<meta name="application-url" content="https://developer.mozilla.org" />
<meta name="google" content="notranslate" />
<!--
<link rel="canonical" href="https://mail.google.com/mail/" />
<link rel="shortcut icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon2.ico" type="image/x-icon" />
<link rel="alternate" type="application/atom+xml" title="Gmail Atom Feed" href="feed/atom" />
-->
<script type="text/javascript">
// <![CDATA[
var options =
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
;
var x = null;
function success(position)
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var accuracyInMeters = position.coords.accuracy;
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
function error(err)
console.warn('ERROR(' + err.code + '): ' + err.message);
x.innerHTML = '<span style="color: red;">No fix on location</span>';
function getLocation()
if (navigator.geolocation)
// https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition
// First of all, realise that the default timeout for getCurrentPosition is infinite(!).
// That means that your error handler will never be called if getCurrentPosition hangs somewhere on the back end.
navigator.geolocation.getCurrentPosition(success, error, options); // Error and optios can be omitted
else
alert("not supported")
x.innerHTML = "Geolocation is not supported by this browser.";
document.addEventListener('DOMContentLoaded', function ()
x = document.getElementById("demo");
/*fun code to run*/
getLocation();
)
// ]]>
</script>
<style type="text/css" media="all">
html, body
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
如果浏览器不支持地理位置，那么您也可以 - 使用 IP 解析城镇的地理坐标，并使用其经度/纬度 - 或者您可以要求用户输入他的地址，并从那里获取经度/纬度：
function searchLocations()
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode(address: address, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
searchLocationsNear(results[0].geometry.location);
else
alert(address + ' not found');
);
除了从 google 获取最近的商店外，您还可以将商店的位置放入数据库表中并在那里查找它们的坐标。 请参阅此处的示例： https://developers.google.com/maps/articles/phpsqlsearch_v3
要获取某个位置附近的商店列表，您可以使用 Google 地方信息 API https://developers.google.com/places/documentation/?csw=1 或者您可以在此处使用 StoreLocater 库：http://storelocator.googlecode.com/git/index.html
【讨论】：
以上是关于地理位置示例代码查找我附近的特定商店 HTML 5的主要内容，如果未能解决你的问题，请参考以下文章
在特定角度的位置附近查找 - 在圆形查询中只考虑前面的半圈而不是后面