利用百度地图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 !!的作用
Dec 04 Javascript
一些mootools的学习资源
Feb 07 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 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获得文件扩展名三法
2006/11/25 PHP
PHP 文件类型判断代码
2009/03/13 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
基于Python测试程序是否有错误
2020/05/16 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
益模软件Java笔试题
2012/03/27 面试题
介绍一下gcc特性
2015/10/31 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
投标邀请书范本
2015/02/02 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android