利用百度地图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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
理解javascript中的闭包
Jan 11 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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
用缓存实现静态页面的测试
2006/12/06 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python subprocess库的使用详解
2018/10/26 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
中级会计职业生涯规划书
2014/03/01 职场文书
法制宣传月活动总结
2014/04/29 职场文书
服务宗旨标语
2014/07/01 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript