利用百度地图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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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 array_unique之后json_encode需要注意
2011/01/02 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
js密码强度校验
2015/11/10 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
12 种使用Vue 的最佳做法
2020/03/30 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python绘制热力图示例
2019/09/27 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
汽车维修专业个人求职信范文
2014/01/01 职场文书
教师读书活动总结
2014/05/07 职场文书
学习十八大的心得体会
2014/09/12 职场文书
商铺租房协议书范本
2014/12/04 职场文书
小学生作文批改评语
2014/12/25 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
tomcat下部署jenkins的方法
2022/05/06 Servers