方法一:html5原生提供的定位:

讲解:在支持HTML5的浏览器下,navigator对象下有一个属性----geolocation,而geolocation属性又有个方法getCurrentPosition(回调函数1,回调函数2)可以通过浏览器向设备发起定位请求,浏览器就会让设备发送相关指令到附近上网设备,上网设备返回定位信息给用户设备,浏览器就获得了用户位置。

当浏览器获得定位信息成功,则navigator.geolocation.getCurrentPosition(回调函数1,回调函数2); 中的回调函数1执行,如果定位失败,则回调函数2执行。

若定位成功,则自动把定位结果对象作为参数传递给回调函数1,。 若定位失败,则自动把错误对象传递给回调函数2.  所以在回调函数2中可通过error.code 获取到错误码。(假设形参名为error)。

如下代码就是用HTML5获取定位信息,并把成功定位交给showPosition处理,把错误定位交给showError处理。

eg:

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert(Geolocation is not supported by this browser);

} //浏览器不支持HTML5.

详细代码:

*{

height: 100%; //设置高度,不然会显示不出来

}

$(function(){

navigator.geolocation.getCurrentPosition(translatePoint); //定位

});

function translatePoint(position){

var currentLat = position.coords.latitude;

var currentLon = position.coords.longitude;

var gpsPoint = new BMap.Point(currentLon, currentLat);

BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标:gpsPoint:转换前坐标,第二个参数为转换方法,0表示gps坐标转换成百度坐标,callback回调函数,参数为新坐标点

}

function initMap(point){

//初始化地图

map = new BMap.Map("map");

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.ScaleControl());

map.addControl(new BMap.OverviewMapControl());

map.centerAndZoom(point, 15);

map.addOverlay(new BMap.Marker(point))

}

注释:

这是因为htm5 的 getCurrentPosition 获取到的坐标是 GPS 经纬度坐标,而百度地图的坐标是经过特殊转换的,所以,在获取定位坐标和初始化地图之间需要进行一步坐标转换工作,该转换方法百度API里面已经提供了,转换一个点或者批量装换的方法均有提供:单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js,批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js,这里只需要前者即可:

方法二:百度地图提供的API

(1)通过浏览器定位:

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

浏览器定位

// 百度地图API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.331398,39.897445);

map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

var mk = new BMap.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

alert('您的位置:'+r.point.lng+','+r.point.lat);

}

else {

alert('failed'+this.getStatus());

}

},{enableHighAccuracy: true})

//关于状态码

//BMAP_STATUS_SUCCESS检索成功。对应数值“0”。

//BMAP_STATUS_CITY_LIST城市列表。对应数值“1”。

//BMAP_STATUS_UNKNOWN_LOCATION位置结果未知。对应数值“2”。

//BMAP_STATUS_UNKNOWN_ROUTE导航结果未知。对应数值“3”。

//BMAP_STATUS_INVALID_KEY非法密钥。对应数值“4”。

//BMAP_STATUS_INVALID_REQUEST非法请求。对应数值“5”。

//BMAP_STATUS_PERMISSION_DENIED没有权限。对应数值“6”。(自 1.1 新增)

//BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用。对应数值“7”。(自 1.1 新增)

//BMAP_STATUS_TIMEOUT超时。对应数值“8”。(自 1.1 新增)

(2)通过ip定位:

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

IP定位获取当前城市

// 百度地图API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.331398,39.897445);

map.centerAndZoom(point,12);

function myFun(result){

var cityName = result.name;

map.setCenter(cityName);

alert("当前定位城市:"+cityName);

}

var myCity = new BMap.LocalCity();

myCity.get(myFun);

百度地图Api:

//让所有点在视野范围内 pointArray:点集合

map.setViewport(pointArray);

//清除所有点集合

map.clearOverlays();

注释:

百度地图开放平台:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding

百度地图生成器:http://api.map.baidu.com/lbsapi/creatmap/index.html

http://developer.baidu.com/map/jsdemo.htm#i8_2

申请百度地图API密匙步骤:http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html

百度地图  地名 转换成经纬度 参考文章:http://www.jb51.net/article/58396.htm

方法三:高德地图定位:

地址:http://lbs.amap.com/api/javascript-api/example/map/map-show/

大家自己去查看

参考:http://blog.csdn.net/suixufeng/article/details/13511761

http://www.jb51.net/html5/208408.html

http://blog.csdn.net/xmtblog/article/details/45093661

来源:oschina

链接:https://my.oschina.net/u/2395167/blog/673496

php获取当前的地理位置,web端定位:获取当前地理位置相关推荐

  1. php获取用户当前坐标,web端定位:获取当前地理位置

    方法一:html5原生提供的定位: 讲解:在支持HTML5的浏览器下,navigator对象下有一个属性----geolocation,而geolocation属性又有个方法getCurrentPos ...

  2. web端定位:获取当前地理位置

    2019独角兽企业重金招聘Python工程师标准>>> 方法一:html5原生提供的定位: 讲解:在支持HTML5的浏览器下,navigator对象下有一个属性----geoloca ...

  3. H5App Web端定位当前位置,获取GPS和地址信息 (高德API)

    仅支持高级浏览器 首先注册高德地图开发者账号,建立应用,获取key 页面中引入: <script type="text/javascript" src="http: ...

  4. C#腾讯地图Web端定位地址搜索及手机导航

    前段时间项目涉及到腾讯地图的业务,这里马克一下. 一开始做腾讯地图功能完全是懵逼的,一搜网上做百度地图居多,问为什么不用百度地图,原因是后面会衔接微信,百度定图定位会有偏差,网上一搜,果真有不少网友吐 ...

  5. 通过高德地图API(WEB端)获取中国所有省市(可扩展)的列表

    有时候做开发的需要用户输入省市信息时,不能让用户随意输入,需要通过级联下拉框或其他方式选择保证数据一致性,也方便后台进行统计操作,但中国全省市列表的话不太容易找到(也有可能我没找到),所以通过高德AP ...

  6. php 获取访问手机号码_移动端网站获取访问者手机号获取抓取PHP方法【源码实例】...

    /** * 类名: mobile * 描述: 手机信息类 * 其他:QQ:29295842 */ class mobile { /** * 函数名称: getPhoneNumber * 函数功能: 取 ...

  7. vue怎么获取用户的位置经纬度_vue 实现Web端的定位功能 获取经纬度

    首先我这里的需求呢, 是获取当前用户的经纬度 经过无数次的测试, 先后用了 腾讯/百度地图的api,最后绝对还是高德的js APi 废话不多说, 直接上代码. 首先在 index.html 里面 引入 ...

  8. java获取移动端定位_移动端报表JS开发示例--获取定位

    上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...

  9. 微信端H5使用百度地图定位获取当前位置安卓定位不准

    微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...

最新文章

  1. 环境部署(java安装和配置,Tomcat安装和配置)(tomcat下部署war包)
  2. 使用OSOT来优化虚拟桌面2
  3. linux-防火墙有关知识积累
  4. Repeater控件嵌套使用
  5. MySQL 5.6 my.cnf 参数说明(转)
  6. 线程同步与异步套接字编程
  7. HTML表格基础学习
  8. 什么?iPhone 11起售价不到5400元?
  9. zabbix安装与配置
  10. zabbix 邮件报警 监控mysql主从
  11. 【Prison Break】第一天(3.27)
  12. 大一c语言常见编程题,自己整理的C语言常见编程题
  13. Vivado2018使用教程
  14. Linux环境下右键无法新建文档的解决方法——Ubuntu 16.x
  15. Echarts实现柱状图下钻功能
  16. 如何将App程序发布到苹果App Store
  17. 中国诺贝尔物理学奖所有获得者名单(转)
  18. IE打开网页时变成下载文件的解决办法
  19. 假冒网站引发多重安全风险 | 官方严正声明:切勿在非官方渠道购买或下载 Navicat 软件
  20. 大数据时代隐私泄露呈高发趋势 如何有效预防成关键

热门文章

  1. Python—selenium实现自动打开360浏览器并自动登录社保网站
  2. 如何提高电脑运行速度(解决卡机)
  3. 路由器的基本配置(Cisco Packet Tracer )
  4. Mitmproxy安装
  5. 鉴机:粉丝买了一台宝峰uv5r对讲机,竟是假的?
  6. CTF练习——MISC密码学部分
  7. 从政务云到国资云,折射国内云计算市场三大趋势
  8. 基于位置数据的分析挖掘
  9. Nuget安装nupkg文件
  10. 抖音流行的人物穿越门窗特效怎么实现,用什么软件?