百度地图JavaScript API 学习之浏览器定位

浏览器定位示例

百度地图API官方的所有demo示例——请直戳这里
官方浏览器定位demo示例——请直戳这里

后来发现的问题，这里记录一下：
在使用百度地图JS API时，无意中发现谷歌浏览器的浏览器定位功能不准确，会出现误差，它会将你当前的地理位置定偏了许多。
也不知道是不是当前谷歌浏览器版本的问题，后来又测试了其他的浏览器，定位也出现了同样的问题。
唯独搜狗高速浏览器的定位结果很正常。（具体原因未知）

这个问题在后面的效果图展示中有提及到，注意察看。

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0,user-scalable=no"><title>浏览器定位</title><style>html,body,#allmap{height: 100%;width: 100%;overflow:hidden;margin:0;font-family: "微软雅黑";}</style><script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body><div id="allmap"></div><script>//百度地图API功能/*命名空间：API使用BMap作为命名空间，所有类均在该命名空间之下。比如：BMap.Map、BMap.Control、BMap.Overlay。*//*Map是地图API的核心类，用来实例化一个地图。*构造函数：Map(container,opts)   在指定的容器内创建地图实例。*之后需要调用Map.centerAndZoom()方法对地图进行初始化。未进行初始化的地图将不能进行任何操作。*//*centerAndZoom(center,zoom)        初始化地图*注意：*1.如果center类型为Point时，zoom必须赋值，范围3-19级。*2.如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。*/var map = new BMap.Map("allmap");//创建地图实例map.centerAndZoom(new BMap.Point(116.404, 39.915),12);//初始化地图：设置中心点坐标和缩放级别//Geolocation类：返回用户当前的位置。//此方法利用浏览器的geolocation接口获取用户当前位置，不支持的浏览器将无法获取。//构造函数：创建Geolocation对象实例var geolocation = new BMap.Geolocation();/*Geolocation()构造函数的方法：*getCurrentPosition()：该方法会返回用户当前位置。*getStatus()：返回状态码。定位成功后返回的状态码为：BMAP_STATUS_SUCCESS。*               如果为其他状态码表示不能获取您当前的位置。*//*当定位成功时，回调函数的参数为GeolocationResult对象，否则为null。*GeolocationResult，该类作为Geolocation的getCurrentPosition方法的回调函数参数，不可实例化。*GeolocationResult类所拥有的属性：point（返回定位成功后的结果，即当前位置的坐标点）**/geolocation.getCurrentPosition(function(result){if(this.getStatus() == BMAP_STATUS_SUCCESS){/*Maker类表示地图上一个图像标注。*构造函数：Maker(point: Point, opts: MarkerOptions)  创建一个图像标注实例。*point参数指定了图像标注所在的地理位置；opts为可选参数。*/var mk = new BMap.Marker(result.point);/*核心类Map的方法：*addOverlay——将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次*panTo——将地图的中心点更改为给定的点。*/map.addOverlay(mk);map.panTo(result.point);/*Point类表示一个地理坐标点。*构造函数：Point(lng,lat)    以指定的经度和纬度创建一个地理点坐标。*该类有两个属性：lng 地理经度 lat 地理纬度*/alert("您当前所在位置的经度是：" + result.point.lng + "，纬度是：" + result.point.lat);}else{alert("定位失败！" + this.getStatus());}});</script>
</body>
</html>

效果图展示：

页面初始化后：

点击确定按钮之后：

当前时间：（今天试了一下浏览器定位，发现竟然和之前测试的位置不一样，目前尚未找到原因）

同样是点击确定按钮之后，画面却变了：居然给我定位到了兰州拉面，这偏的有点远了，我也是无话可说了。

但是换其他浏览器没有问题，唯独谷歌浏览器出现了这种情况。

在这里记录一下当前所使用的谷歌浏览器的版本：

QQ浏览器浏览器定位效果图

火狐浏览器浏览器定位效果图

搜狗浏览器浏览器定位效果图

各大浏览器测试结果

谷歌浏览器、火狐浏览器、QQ浏览器的定位结果一致：您当前所在位置的经度是：121.48789949，纬度是：31.24916171
搜狗浏览器的定位结果不一致：您当前所在位置的经度是：121.18016268001，纬度是：31.166477087954

导致出现这种结果的具体原因未知，目前只能说唯独搜狗浏览器的定位结果是准确的，其他的浏览器都不知道定位到哪里去了。本来是在上海市青浦区，结果定位到了静安区。无语….

希望知道原因的朋友告知我一下，谢谢！

知识点解析

Geolocation类（点击查看）

GeolocationResult类（点击查看）

PositionOptions类（点击查看）

StatusCode类（点击查看）

具体内容如下图所示：

图1：

图2：

图3：

结束语

对于不懂的知识点，我们应该及时去查阅官方的API文档，如果还看不懂，那是因为你没有仔细看过官方的类参考说明，没有好好的研究，实践。除此之外，还可以参考或者借鉴官方的示例DEMO中的写法，刚开始我们就模仿着来写，写得多了就能熟练掌握并且应用了，关键还是在于多尝试，多实践，多思考。如果再看不懂的话，我也无能为力了。

百度地图开放平台——JavaScript API v2.0类参考（不懂就来这里看，没有看不懂的代码，官方的解释已经很详细了）