利用百度地图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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
js实现全选和全不选功能
Jul 28 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
对Session和Cookie的区分与解释
2007/03/16 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python类定义和类继承详解
2015/05/08 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python实现图片压缩代码实例
2019/08/12 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
大学运动会入场词
2014/02/22 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android