利用百度地图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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
ext jquery 简单比较
Apr 07 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 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实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JavaScript字符串对象
2017/01/14 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
webpack v4 从dev到prd的方法
2018/04/02 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python流程控制语句的深入讲解
2020/06/15 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
新闻专业应届生求职信
2013/10/31 职场文书
会计学应届毕业生推荐信
2013/11/04 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
房屋租赁协议书
2014/04/10 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
常务副总经理任命书
2014/06/05 职场文书
神农溪导游词
2015/02/11 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers