在移动设备以及现代浏览器中可以直接同navigator.geolocation所提供的api, 获取你当前经纬度. 并且通过GoogleMapAPI, 查看你当前所在位置的地图.
一. 在客户端上获取经纬度.
获取经纬度有两个api: getCurrentPosition以及watchPosition. 从本质上来说都是获取你当前所在的位置.
getCurrentPosition(callback)
watchPosition(successCallback, failureCallback, options)
在stackoverflow上找到了一篇讨论两者不同的论题. http://stackoverflow.com/questions/1948952/watchposition-vs-getcurrentposition-w-settimeout
After some serious testing, I have verified watchPosition() will give you an accurate location much more quickly than getCurrentPostion() over and over again. When using watchPostion(), the map behaves poorly if you redraw it over and over again every time the device updates your location. To get around this, I have added a listener to the tilesloaded event, which allows me to only redraw the map if there is not already a thread trying to draw on the map. Once the user is happy with the determined location, I will clear the watch. This will get me the best of both worlds, as far as battery consumption and accuracy are concerned.
这个就看你个人喜欢用哪个api了, 我推荐后者watchPosition. 首先写一个页面用来获取经纬度
<html>
<head>
<title>Get position by geolocation</title>
</head>
<body>
<span id="coords"></span>
<script type="text/javascript">// <![CDATA[
var geo = navigator.geolocation;
geo.watchPosition(function(position){
var coords = position.coords;
var latitude = coords.latitude, longitude = coords.longitude;
document.getElementByID("coords").innerHTML = "latitude: " + latitude + ", longitude: " + longitude;
}, function(error){
throw error;
}, {enableHighAccuracy:true, maximumAge: 30000, timeout: 27000})
// ]]></script>
</body>
</html>
你打开网页的时候就能看到网页所取得的经纬度..
二 使用GoogleMapAPI获取地址
http://maps.googleapis.com/maps/api/geocode/json?latlng=31.2399484,121.3791791&sensor=true&language=zh-CN
将会返回:
{
"results": [{
"address_components": [{
"long_name": "834号-970号",
"short_name": "834号-970号",
"types": ["street_number"]
}, {
"long_name": "Zhenguang Rd",
"short_name": "Zhenguang Rd",
"types": ["route"]
}, {
"long_name": "Putuo",
"short_name": "Putuo",
"types": ["sublocality", "political"]
}, {
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["locality", "political"]
}, {
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["administrative_area_level_1", "political"]
}, {
"long_name": "China",
"short_name": "CN",
"types": ["country", "political"]
}],
"formatted_address": "834号-970号 Zhenguang Rd, Putuo, Shanghai, China",
"geometry": {
"bounds": {
"northeast": {
"lat": 31.24009389999999,
"lng": 121.37915450
},
"southwest": {
"lat": 31.23713110,
"lng": 121.37654240
}
},
"location": {
"lat": 31.24000040,
"lng": 121.37909690
},
"location_type": "RANGE_INTERPOLATED",
"viewport": {
"northeast": {
"lat": 31.24009389999999,
"lng": 121.3791974302915
},
"southwest": {
"lat": 31.23713110,
"lng": 121.3764994697085
}
}
},
"types": ["street_address"]
}, {
"address_components": [{
"long_name": "Putuo",
"short_name": "Putuo",
"types": ["sublocality", "political"]
}, {
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["locality", "political"]
}, {
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["administrative_area_level_1", "political"]
}, {
"long_name": "China",
"short_name": "CN",
"types": ["country", "political"]
}],
"formatted_address": "Putuo, Shanghai, China",
"geometry": {
"bounds": {
"northeast": {
"lat": 31.30288520,
"lng": 121.45146710
},
"southwest": {
"lat": 31.21827589999999,
"lng": 121.32606960
}
},
"location": {
"lat": 31.2495540,
"lng": 121.3964010
},
"location_type": "APPROXIMATE",
"viewport": {
"northeast": {
"lat": 31.30288520,
"lng": 121.45146710
},
"southwest": {
"lat": 31.21827589999999,
"lng": 121.32606960
}
}
},
"types": ["sublocality", "political"]
}, {
"address_components": [{
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["locality", "political"]
}, {
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["administrative_area_level_1", "political"]
}, {
"long_name": "China",
"short_name": "CN",
"types": ["country", "political"]
}],
"formatted_address": "Shanghai, China",
"geometry": {
"bounds": {
"northeast": {
"lat": 31.66889670,
"lng": 122.11379890
},
"southwest": {
"lat": 30.77980120,
"lng": 120.83970670
}
},
"location": {
"lat": 31.2303930,
"lng": 121.4737040
},
"location_type": "APPROXIMATE",
"viewport": {
"northeast": {
"lat": 31.66889670,
"lng": 122.11379890
},
"southwest": {
"lat": 30.77980120,
"lng": 120.83970670
}
}
},
"types": ["locality", "political"]
}, {
"address_components": [{
"long_name": "Shanghai",
"short_name": "Shanghai",
"types": ["administrative_area_level_1", "political"]
}, {
"long_name": "China",
"short_name": "CN",
"types": ["country", "political"]
}],
"formatted_address": "Shanghai, China",
"geometry": {
"bounds": {
"northeast": {
"lat": 31.87271630,
"lng": 122.2471490
},
"southwest": {
"lat": 30.67559350,
"lng": 120.85680470
}
},
"location": {
"lat": 31.2303930,
"lng": 121.4737040
},
"location_type": "APPROXIMATE",
"viewport": {
"northeast": {
"lat": 31.87271630,
"lng": 122.2471490
},
"southwest": {
"lat": 30.67559350,
"lng": 120.85680470
}
}
},
"types": ["administrative_area_level_1", "political"]
}, {
"address_components": [{
"long_name": "China",
"short_name": "CN",
"types": ["country", "political"]
}],
"formatted_address": "China",
"geometry": {
"bounds": {
"northeast": {
"lat": 53.56097399999999,
"lng": 134.772810
},
"southwest": {
"lat": 17.99960,
"lng": 73.49941369999999
}
},
"location": {
"lat": 35.861660,
"lng": 104.1953970
},
"location_type": "APPROXIMATE",
"viewport": {
"northeast": {
"lat": 53.56097399999999,
"lng": 134.772810
},
"southwest": {
"lat": 17.99960,
"lng": 73.49941369999999
}
}
},
"types": ["country", "political"]
}],
"status": "OK"
}
通过返回的这些数据, 可以查询附近餐饮, 当前的天气等等小应用.
i love your blog, i have it in my rss reader and always like new things coming up from it.