百度地图JavaScript API 学习之浏览器定位 |
您所在的位置：网站首页 › 为什么百度地图定位失败 › 百度地图JavaScript API 学习之浏览器定位 |
百度地图JavaScript API 学习之浏览器定位
|
浏览器定位示例
百度地图API官方的所有demo示例——请直戳这里 官方浏览器定位demo示例——请直戳这里 后来发现的问题，这里记录一下： 在使用百度地图JS API时，无意中发现谷歌浏览器的浏览器定位功能不准确，会出现误差，它会将你当前的地理位置定偏了许多。 也不知道是不是当前谷歌浏览器版本的问题，后来又测试了其他的浏览器，定位也出现了同样的问题。 唯独搜狗高速浏览器的定位结果很正常。（具体原因未知） 这个问题在后面的效果图展示中有提及到，注意察看。 代码示例 浏览器定位 html,body,#allmap{ height: 100%; width: 100%; overflow:hidden; margin:0; font-family: "微软雅黑"; } //百度地图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()); } }); 效果图展示：页面初始化后： 点击确定按钮之后： 当前时间：（今天试了一下浏览器定位，发现竟然和之前测试的位置不一样，目前尚未找到原因） 同样是点击确定按钮之后，画面却变了：居然给我定位到了兰州拉面，这偏的有点远了，我也是无话可说了。 但是换其他浏览器没有问题，唯独谷歌浏览器出现了这种情况。 在这里记录一下当前所使用的谷歌浏览器的版本： QQ浏览器浏览器定位效果图 火狐浏览器浏览器定位效果图 搜狗浏览器浏览器定位效果图 谷歌浏览器、火狐浏览器、QQ浏览器的定位结果一致：您当前所在位置的经度是：121.48789949，纬度是：31.24916171 搜狗浏览器的定位结果不一致：您当前所在位置的经度是：121.18016268001，纬度是：31.166477087954 导致出现这种结果的具体原因未知，目前只能说唯独搜狗浏览器的定位结果是准确的，其他的浏览器都不知道定位到哪里去了。本来是在上海市青浦区，结果定位到了静安区。无语…. 希望知道原因的朋友告知我一下，谢谢！ 知识点解析 Geolocation类（点击查看） GeolocationResult类（点击查看） PositionOptions类（点击查看） StatusCode类（点击查看）具体内容如下图所示： 图1： 图2： 图3： 对于不懂的知识点，我们应该及时去查阅官方的API文档，如果还看不懂，那是因为你没有仔细看过官方的类参考说明，没有好好的研究，实践。除此之外，还可以参考或者借鉴官方的示例DEMO中的写法，刚开始我们就模仿着来写，写得多了就能熟练掌握并且应用了，关键还是在于多尝试，多实践，多思考。如果再看不懂的话，我也无能为力了。 百度地图开放平台——JavaScript API v2.0类参考（不懂就来这里看，没有看不懂的代码，官方的解释已经很详细了） |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |