目前了解的自动定位的方式有两种:
- PC通过IP地址定位。
- 移动端通过调百度地图接口定位。
今天来聊聊第二种的实现,会一步步带你写一个DEMO,超级简单,不要怕。
比较关键的技术点:
1. navigator中geolocation的getCurrentPosition方法:
getCurrentPosition使用方法:
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
options:
option参数支持三个可选参数API,为:enableHighAccuracy, timeout, maximumAge.
1. enableHighAccuracy参数表示是否高精度可用,为Boolean类型,默认为false,如果开启,响应时间会变慢,同时,在手机设备上会用掉更多的流量,也就是money了。
2. timeout参数表示等待响应的最大时间,默认是0毫秒,表示无穷时间。
3. maximumAge表示应用程序的缓存时间。单位毫秒,默认是0,意味着每次请求都是立即去获取一个全新的对象内容。
2. 百度地图请求地址https://api.map.baidu.com/geocoder/v2/
需要的请求参数:
poi解释:
Point of interesting. 可以翻译为兴趣点,就是在地图上任何非地理意义的有意义的点:比如商店,酒吧,加油站,医院,车站等。不属于poi的是有地理意义的坐标:城市,河流,山峰 。
ak: 百度秘钥
location: 39.983424,116.322987 (维度,经度)
POI(0/1): 是否显示指定位置周边的poi,0为不显示,1为显示。当值为1时,显示周边100米内的poi。
下面是个小DEMO(最好传到服务器上验证):
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function showLocation(position) {
var baiduGeoApi = {
BAIDU_ACCESS_KEY: "o0LVi345SG0pu2IyhkEGTGw3dusTyFG7",
API_PATH: "https://api.map.baidu.com/geocoder/v2/",
};
//**************************************************
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
var location = latitude + "," + longitude;
var url = window.location.protocol + "//api.map.baidu.com/geocoder/v2/?ak=" + baiduGeoApi.BAIDU_ACCESS_KEY + "&callback=_sucCallback&location=" + location + "&output=json&pois=0";
var script = document.createElement("script");
script.setAttribute("src", url);
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
function _sucCallback (result){
var cityInfo = result.result.addressComponent;
<!--alert(cityInfo.city);省-->
<!--alert(cityInfo.province);市-->
<!--alert(cityInfo.district);区-->
if(result.status == 0){
var city = JSON.stringify(result.result.addressComponent.city),
province = JSON.stringify(result.result.addressComponent.province);
}else {
alert('err')
}
_sucCallback = null;
}
function errorHandler(err) {
if (err.code == 1) {
alert("Error: Access is denied!");
} else if (err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation() {
if (navigator.geolocation) {
// timeout at 60000 milliseconds (60 seconds)
var options = { timeout: 60000 };
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
} else {
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<html>
<body>
<form>
<input type="button" onclick="getLocation();" value="Get Location" />
</form>
</body>
</html>
参考链接: