任何想法找到商店附近我的位置使用地理定位API?一个示例代码应该是好的,然后我将从那里继续。
您可以通过地理定位API获得当前位置。
然后你给google地图提供经度和纬度,连同搜索查询,google地图将返回给你地图,以及你必须放置标记的位置:
<?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 Places API
https://developers.google.com/places/documentation/?csw=1
或者你可以在这里使用StoreLocater库:
http://storelocator.googlecode.com/git/index.html