利用百度地图API获取当前位置信息的实例


Posted in Javascript onNovember 06, 2017

利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了。这里分享一个制作的JS可以实现登录网页后定位:

<script type="text/javascript"> 
var map; 
var gpsPoint; 
var baiduPoint; 
var gpsAddress; 
var baiduAddress; 
var x;
var y;
function getLocation() { 
//根据IP获取城市 
var myCity = new BMap.LocalCity(); 
myCity.get(getCityByIP); 

//获取GPS坐标 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 }); 
} else { 
alert("您的浏览器不支持使用HTML 5来获取地理位置服务"); 
} 
} 

function showMap(value) { 
var longitude = value.coords.longitude; 
var latitude = value.coords.latitude; 
map = new BMap.Map("map"); 
x=latitude;
y=longitude;
//alert("坐标经度为:" + latitude + ", 纬度为:" + longitude ); 
gpsPoint = new BMap.Point(longitude, latitude); // 创建点坐标 


//根据坐标逆解析地址 
var geoc = new BMap.Geocoder(); 
geoc.getLocation(gpsPoint, getCityByCoordinate); 

BMap.Convertor.translate(gpsPoint, 0, translateCallback); 
map.enableScrollWheelZoom(true);
} 

translateCallback = function (point) { 
baiduPoint = point; 
map.centerAndZoom(baiduPoint, 18); 
var geoc = new BMap.Geocoder(); 
geoc.getLocation(baiduPoint, getCityByBaiduCoordinate); 
} 

function getCityByCoordinate(rs) { 
gpsAddress = rs.addressComponents; 
var address = "GPS标注:" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber; 
var marker = new BMap.Marker(gpsPoint); // 创建标注 
map.addOverlay(marker); // 将标注添加到地图中 
var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) }); 
marker.setLabel(labelgps); //添加GPS标注 
} 

function getCityByBaiduCoordinate(rs) { 
baiduAddress = rs.addressComponents; 
var address = "百度标注:" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber; 
var marker = new BMap.Marker(baiduPoint); // 创建标注 
map.addOverlay(marker); // 将标注添加到地图中 
var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) }); 
marker.setLabel(labelbaidu); //添加百度标注 
} 

//根据IP获取城市 
function getCityByIP(rs) { 
var cityName = rs.name; 
alert("根据IP定位您所在的城市为:" + cityName); 
} 

function handleError(value) { 
switch (value.code) { 
case 1: 
alert("位置服务被拒绝"); 
break; 
case 2: 
alert("暂时获取不到位置信息"); 
break; 
case 3: 
alert("获取信息超时"); 
break; 
case 4: 
alert("未知错误"); 
break; 
} 
} 

function init() { 
getLocation(); 
} 

window.onload = init; 

</script>

完成定位功能后可以添加相关代码编辑地图控件 覆盖物 信息窗口等等各种功能。

附上百度地图连接:http://lbsyun.baidu.com/

以上这篇利用百度地图API获取当前位置信息的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
javascript打开word文档的方法
Apr 16 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
Node.js实现发送邮件功能
Nov 06 #Javascript
快速搭建React的环境步骤详解
Nov 06 #Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 #Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
JS实现图片放大镜插件详解
Nov 06 #Javascript
js定时器实现倒计时效果
Nov 05 #Javascript
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
基于滚动条位置判断的简单实例
2017/12/14 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
python开发中module模块用法实例分析
2015/11/12 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
毕业生自我鉴定
2013/11/05 职场文书
绿色学校实施方案
2014/03/31 职场文书
政风行风整改方案
2014/10/25 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
如何Tomcat中使用ipv6地址
2022/05/06 Servers