利用百度地图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 相关文章推荐
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
PHP面向对象编程快速入门
2006/10/09 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php常用的url处理函数总结
2014/11/19 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js倒计时小程序
2013/11/05 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python模块搜索路径代码详解
2018/01/29 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
墨西哥网上超市:Superama
2018/07/10 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
地理科学专业自荐信
2014/09/01 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
总结几个非常实用的Python库
2021/06/26 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python