利用百度地图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的Function详细
Nov 14 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
python绘图方法实例入门
2015/05/19 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
贷款委托书范本
2014/04/08 职场文书
三严三实学习心得体会
2014/10/13 职场文书
换届选举主持词
2015/07/03 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
SQLServer常见数学函数梳理总结
2022/08/05 MySQL