Html5 Geolocation获取地理位置信息
Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。
Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。
如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。
代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>H5地理位置Demo</title> 5 <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"> 6 </script> 7 <script type="text/javascript" src="convertor.js"> 8 </script> 9 </head> 10 <body> 11 <div id="map" style="width:600px; height:400px"> 12 </div> 13 </body> 14 <script type="text/javascript"> 15 if (window.navigator.geolocation) { 16 var options = { 17 enableHighAccuracy: true, 18 }; 19 window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options); 20 } else { 21 alert("浏览器不支持html5来获取地理位置信息"); 22 } 23 24 function handleSuccess(position){ 25 // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度 26 var lng = position.coords.longitude; 27 var lat = position.coords.latitude; 28 // 调用百度地图api显示 29 var map = new BMap.Map("map"); 30 var ggPoint = new BMap.Point(lng, lat); 31 // 将google地图中的经纬度转化为百度地图的经纬度 32 BMap.Convertor.translate(ggPoint, 2, function(point){ 33 var marker = new BMap.Marker(point); 34 map.addOverlay(marker); 35 map.centerAndZoom(point, 15); 36 }); 37 } 38 39 function handleError(error){ 40 41 } 42 </script> 43 </html>
convertor.js文件：
1 (function() { // 闭包 2 function load_script(xyUrl, callback) { 3 var head = document.getElementsByTagName('head')[0]; 4 var script = document.createElement('script'); 5 script.type = 'text/javascript'; 6 script.src = xyUrl; 7 // 借鉴了jQuery的script跨域方法 8 script.onload = script.onreadystatechange = function() { 9 if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { 10 callback && callback(); 11 // Handle memory leak in IE 12 script.onload = script.onreadystatechange = null; 13 if (head && script.parentNode) { 14 head.removeChild(script); 15 } 16 } 17 }; 18 // Use insertBefore instead of appendChild to circumvent an IE6 bug. 19 head.insertBefore(script, head.firstChild); 20 } 21 function translate(point, type, callback) { 22 var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名 23 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type 24 + "&to=4&x=" + point.lng + "&y=" + point.lat 25 + "&callback=BMap.Convertor." + callbackName; 26 // 动态创建script标签 27 load_script(xyUrl); 28 BMap.Convertor[callbackName] = function(xyResult) { 29 delete BMap.Convertor[callbackName]; // 调用完需要删除改函数 30 var point = new BMap.Point(xyResult.x, xyResult.y); 31 callback && callback(point); 32 } 33 } 34 35 window.BMap = window.BMap || {}; 36 BMap.Convertor = {}; 37 BMap.Convertor.translate = translate; 38 })();
---------------------------------------------------------------------------------
笔者水平有限，若有错漏，欢迎指正，如果转载以及CV操作，请务必注明出处，谢谢！
笔者水平有限，若有错漏，欢迎指正，如果转载以及CV操作，请务必注明出处，谢谢！
相关推荐
**标题详解：** "百度地图WiFi定位获取地理位置" 在标题中提到的“百度地图WiFi定位获取地理位置”，是指利用百度地图提供的API（应用程序接口）服务，通过用户的WiFi信号来确定其所在的地理位置。这种技术通常用于...
在IT行业中，尤其是在地理信息系统（GIS）或者定位服务相关的开发工作中，经常需要根据特定的地理位置信息，如街道...对于开发者而言，理解如何使用百度地图API进行坐标转换和地理位置获取是开发地图相关应用的基础。
本文将深入探讨如何使用C#结合百度地图API来获取用户的经纬度，并根据这些经纬度确定其所在地理位置。 首先，我们需要了解百度地图API的基本概念。百度地图API是百度提供的一套接口，允许开发者在其应用程序中集成...
【百度地图获取方圆地理位置】是基于HTML5技术与百度地图API实现的一项功能，它允许开发者在网页中获取特定地点周围的一定范围内地理位置信息。这项技术在众多应用场景中都非常实用，例如定位服务、导航系统、生活...
Marker是百度地图API中的一个对象，用于在地图上表示一个具体的地理位置。它通常由一个图标和一个位置坐标组成，用户可以通过点击marker获取更多信息或者执行相关操作。 要实现marker动画，我们主要借助CSS3的`...
高德和百度地图位置添加技巧攻略.pptx
首先，让我们关注“基于百度地图的地理位置选择功能”。百度地图API为开发者提供了丰富的地图服务，包括地图显示、定位、路径规划、地址选择等。通过集成百度地图SDK，开发者可以轻松地在应用中嵌入地图，并让用户...
为了提供更好的用户体验，可以添加搜索框，让用户输入地址或地点，然后调用百度地图的地理编码服务进行反向解析，将地址转换为经纬度坐标。这需要用到Geocoding API。 最后，当用户确认选择的位置后，可以将Marker...
百度地图设置坐标，标注坐标地理位置百度地图设置坐标，标注坐标地理位置百度地图设置坐标，标注坐标地理位置百度地图设置坐标，标注坐标地理位置百度地图设置坐标，标注坐标地理位置
HTML5定位技术是现代网页开发中的一个重要特性，它允许网页应用程序获取用户设备的地理位置信息，为用户提供更加个性化和精准的服务。这项技术主要依赖于Geolocation API，它在浏览器环境中提供了获取用户位置的能力...
在"Echarts+百度地图 可查看散点图详细位置信息"这个项目中，我们可以理解为开发者利用Echarts的地图插件与百度地图API进行了集成，实现了在地图上显示散点，并且这些散点带有详细的地理位置信息。当用户鼠标悬停或...
在本文中，我们将深入探讨如何使用C#编程语言开发一个Windows窗体应用程序，该程序能够根据经纬度在百度地图上标记特定的位置。首先，我们需要理解C#的基础知识，包括类、对象、事件处理以及窗体应用程序的基本结构...
二是“定位当前位置”，这是百度地图的核心功能之一，用户可以通过此功能获取自己实时的地理位置信息。 【描述分析】 描述中提到，“百度地图最新版定位当前案例”意味着这个案例可能是开发者为了演示如何在新版本...
在Android平台上，使用百度地图API实现定位用户自身位置是一项常见的需求。这涉及到移动开发、地理信息系统（GIS）以及网络服务的集成。以下是一些关于如何在Android应用中使用百度地图API来定位用户位置的关键知识...
基于百度sdk的一套程序，可以定位到当前位置，在地图上标注当前位置。可以手动在地图上选择点，点击标注，获取标注的信息。http://blog.csdn.net/wangkaichenjuan/article/details/50515504
安卓 android 百度地图 SDK GPS 位置获取 位置地图显示
百度地图SDK（Software Development Kit）为开发者提供了方便快捷的接口，使得在Android和iOS平台上获取用户位置变得简单。本篇将详细介绍如何利用百度地图SDK获取位置信息。 一、百度地图SDK简介 百度地图SDK是...
百度地图源码的深入解析有助于开发者更好地理解和应用百度地图API，无论是构建位置服务应用还是增强现有网站的地理位置功能，都能提供强大的技术支持。通过对给定源码的学习，可以掌握如何在网页中嵌入地图、设置...
当用户开启百度地图并给予位置权限，应用会自动调用GPS功能，以显示用户当前所在的地理位置。 其次，除了GPS，网络定位也是实现这一功能的方式。在没有GPS信号或者信号弱的情况下，百度地图可以利用Wi-Fi或移动网络...
这个SDK支持GPS、WiFi、基站等多种定位方式，可以提供高精度的地理位置信息。 在Android或iOS平台上，我们首先需要在项目中引入百度地图的SDK。对于Android，这通常意味着在build.gradle文件中添加依赖，并在应用...