在html5中有一个navigator.geolocation的特性来判断是否支持获取地理位置，地理位置的定位有GPS，IP地址，wifi，GSM/CDMA几种方法。
我们这里用百度地图的API来获取当前的经度和纬度，来搜索具体的位置。
navigator.geolocation有三个方法：1. getCurrentPosition();2. watchPosition();3. clearWatch()
1.getCurrentPosition（）的使用方法：使用 getCurrentPosition() 方法来获得用户的位置。正确的使用方法为
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);里面有三个参数，成功的回调，失败的回调，设置position更精细的参数。
onSuccess有关于位置的信息：该对象有属性timestamp和coords;
timestamp是响应的日期/时间
coords包含以下性质：
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
onError表示失败的信息，通过返回的code码，可以知道失败的原因，
code 1:位置服务被拒绝（可能是浏览器拒绝分享地理位置，需要设置以下浏览器）
code 2: 暂时获取不到位置信息
code 3: 获取信息超时
code 4: 未知错误
options表示更详细的定位信息：
enableHighAccuracy：它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true。
timeout：超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数 ;
2.watchPosition（）的使用：
功能getCurrentPosition()相似，watchPosition()是定期轮询设备的位置，同样拥有3个参数，与getCurrentPosition()相同
3.clearWatch()
配合watchPosition()使用，用于停止watchPosition()轮询。
结合百度地图API，首先需要注册一个百度的密钥，然后引入百度的API模块，
ak=Hocni7ZDnrLvqES2m8VGf8TI3vp2q7yq密钥填写处
<script src="http://api.map.baidu.com/api?v=2.0&ak=Hocni7ZDnrLvqES2m8VGf8TI3vp2q7yq"></script>
百度地图上面有很多实例。可以参考一下：我所写的结果如下：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Hocni7ZDnrLvqES2m8VGf8TI3vp2q7yq"></script>
<script type="text/javascript">
onload = function(){
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
map.enableScrollWheelZoom(true);
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(data){
console.log(data);
var jd = data.coords.longitude;
var wd = data.coords.latitude;
var pt = new BMap.Point(jd,wd);
var mk = new BMap.Marker(pt);
map.addOverlay(mk);
map.panTo(pt);
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search("腾讯科技");
},function(error){
console.log(error);
})
}
}
</script>
</head>
<body>
<div style="width: 600px; height: 600px;" id="allmap"></div>
</body>
</html>
欢迎交流，分享......
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
