利用百度地图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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
JavaScript实现轮播图特效
Apr 10 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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支持断点续传的源码
2010/05/16 PHP
PHP中PDO的错误处理
2011/09/04 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
程序员岗位职责
2013/11/11 职场文书
远程教育心得体会
2014/01/03 职场文书
公务员综合考察材料
2014/02/01 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers