利用百度地图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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
解决linux下node.js全局模块找不到的问题
May 15 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
JavaScript事件列表解说
2006/12/22 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
Python中方法链的使用方法
2016/02/23 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python list转置和前后反转的例子
2019/08/26 Python
python批量修改xml属性的实现方式
2020/03/05 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
建筑实习自我鉴定
2013/10/18 职场文书
英语文学专业学生的自我评价
2013/10/31 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
商业街策划方案
2014/05/31 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
小学生读书笔记
2015/07/01 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL