手机端，h5，获取位置，经度纬度

以下代码保存为html格式，在手机端浏览器打开，浏览器开放读取位置权限

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Title</title>
</head>
<body>
您目前在<p></p>
</body>
<script>//定义一个空的位置构造函数function Location(){};//定义一个可以获得经纬度的方法Location.prototype.getLocation = function(callback){var options = {enableHighAccuracy: true,maximumAge: 1000};this.callback = Object.prototype.toString.call(callback) =="[object Function]" ?callback :function(address){alert(address.province + address.city);console.log("getocation(callbackFunction) 可获得定位信息对象");};var self = this;if (navigator.geolocation) {//浏览器支持geolocationnavigator.geolocation.getCurrentPosition(function(position){//经度var longitude = position.coords.longitude;//纬度var latitude = position.coords.latitude;alert(longitude +"|"+ latitude);self.loadMapApi(longitude,latitude);}, self.onError, options);} else {//浏览器不支持geolocation}};//定义一个可以解析经纬度的方法，调用百度的apiLocation.prototype.loadMapApi = function(longitude, latitude){var self = this;var oHead = document.getElementsByTagName('HEAD').item(0);var oScript= document.createElement("script");oScript.type = "text/javascript";oScript.src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=FG7wxr1VUj0k2NwoO3yXzymd&amp;services=&amp;t=20140930184510";oHead.appendChild(oScript);oScript.onload = function(date){var point = new BMap.Point(longitude, latitude);var gc = new BMap.Geocoder();gc.getLocation(point, function(rs) {var addComp = rs.addressComponents;self.callback(addComp);});}};//定义出现查询位置出现意外的方法Location.prototype.onError = function(error) {switch (error.code) {case 1:alert("位置服务被拒绝");break;case 2:alert("暂时获取不到位置信息");break;case 3:alert("获取信息超时");break;case 4:alert("未知错误");break;}};//调用var local = new Location();local.getLocation(function(res){var str=""for(i in res ){str=res[i]+str}document.querySelector("p").innerHTML=str;})
</script>
</html>

手机端，h5，获取位置，经度纬度相关推荐

手机端定位获取用户位置信息
很多时候,我们需要获取手机端用户的位置信息,当然这需要用户的同意授权才能进行获取,下面介绍下我在项目中使用的定位由于本项目web端使用的是高德地图,因此手机端定位也使用高德的定位接口 <htm ...
LiveGBS国标视频流媒体平台GB/T28181针对没有位置上报的设备如何自定义位置经度纬度信息电子地图标注
GB28181针对没有位置上报的设备如何自定义位置经度纬度信息 1.关于位置订阅 2.自定义位置信息 2.1.国标设备->查看通道->位置 2.2.点击该行的位置字段 3.搭建GB2818 ...
pc网站和手机端h5网站开发接入微信支付
有关支付类开发,现在比以前要简单很多了,微信和支付宝两大支付巨头早已经给出了非常详细的接入文档,并且迭代了好多版本,但在实际开发中其实文档的可读性还是有些磕磕绊绊的,而且也有一些坑需要注意.以微信支付 ...
手机端H5开发，屏幕不同尺寸适配方法（屏幕自适应）
最近在接触手机端H5开发,然后设计师将设计图发给我们进行开发,对于第一次接触详细设计图开发的我来说,觉得很新颖毕竟一直没有接触这么正规的设计图(字体样式,颜色,大小等等),之后再开发的时候,就遇到了一 ...
h5适配华为手机_手机端H5页面适配踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
h5可拖动悬浮按钮_手机端H5悬浮按钮怎么实现的呢？
最近公司项目需要在H5页面上悬浮一个按钮,同时要求按钮是可以拖动的并且需要可以自动贴边,无奈前端小伙伴不怎么给力,无奈只能我顶上了.我觉得这种情况应该可以抽出一个组件,这次就仔细探讨一下悬浮按钮的实现 ...
vue 地理位置定位_Vue 通过调用百度API获取地理位置-经度纬度省份城市
一.首先在百度api注册获得ak密钥二.新建js文件,我命名为loadBMap.js,里面创建script,代码如下: /** * 加载地图 * @param {Function} callback ...
从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...
JS实现视频试看提示付费功能手机端 H5网页
手机端网页 JS实现视频试看功能,到时间自动停止播放 H5 场景:视频播放对未付费的用户只播放两分钟付费的用户可正常播放思路:监听视频播放时间,到达预定时间的时候, 暂停视频播放, 同时关闭大 ...
chrome浏览器调试手机端h5页面
这个是常识性的问题了.奈何我之前确实是不知道.只知道用F12来调试PC端的页面,这次经过同事指点,终于知道为啥人家在浏览器调试手机端页面,显示的大小都是手机端的. 步骤: 1.打开F12 2.如果所示 ...

手机端，h5，获取位置，经度纬度

手机端，h5，获取位置，经度纬度相关推荐

最新文章

热门文章