利用百度地图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的图片的切换(以数字的形式)
Feb 14 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
JS实现点击按钮可实现编辑功能
Jul 03 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教程 基本语法
2009/10/23 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
西门豹教学反思
2014/02/04 职场文书
保密协议书范本
2014/04/22 职场文书
给市场的环保建议书
2014/05/14 职场文书
会员卡清退活动总结
2014/08/27 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年应急工作总结
2014/12/11 职场文书
晚会开场白和结束语
2015/05/29 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android