利用百度地图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 25 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
面试常见的js算法题
Mar 23 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 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读取目录所有文件信息dir示例
2014/03/18 PHP
php树型类实例
2014/12/05 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
用jscript实现新建word文档
2007/06/15 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python遍历字典方式就实例详解
2019/12/28 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
金融专业推荐信
2013/11/14 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
老干部工作汇报材料
2014/10/28 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
Java设计模式中的命令模式
2022/04/28 Java/Android