手机端H5获取当前城市的方法

移动端的H5页面提供了定位的功能,那么如何实现一个最简单的需求-----获取用户当前城市?

你可能搜一下就会找到N篇博客介绍,但是你会发现你看完大段代码之后还是没搞清楚,为了便于大家理解,我精简了代码,只保留了必要的部分。

1、在html页面引入百度地图API(文档地址:http://developer.baidu.com/map/wiki/index.php?title=jspopular/guide/introduction

<script src="http://api.map.baidu.com/api?ak=你的AK码&v=2.0&services=false"></script>

2、js代码使用h5的geolocation方法获取坐标,然后使用百度api的getlocation方法翻译成你想要得结果

 1 navigator.geolocation.getCurrentPosition(function (position) {
 2         var lat = position.coords.latitude;
 3         var lon = position.coords.longitude;
 4         var point = new BMap.Point(lon, lat);  // 创建坐标点
 5         // 根据坐标得到地址描述
 6         var myGeo = new BMap.Geocoder();
 7         myGeo.getLocation(point, function (result) {
 8             var city = result.addressComponents.city;
 9             $(‘body‘).html(city);
10         });
11     });

3、打开手机试一下吧

时间: 2024-10-07 18:46:03

手机端H5获取当前城市的方法的相关文章

【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽了,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视频广告!),之前用canvans渲染,感觉不够太完美,又弄成背景切换形式得(用背景切换形式可以完美解决当一个容器有transform:rotate(90deg)属性时自适应百分比问题,若是canvans需去计算高宽太麻烦还需考虑不同系统). 想要手机端h5播放时不自动全屏比想象的简单,看加粗部分,一

html5手机端播放音效不卡的方法

html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioEngine.playEffect('/solosea1/music/laidian.mp3', false); 如果切换不了 可以先stop 然后再play audioEngine.stopEffect('/hcfabuhui/music/2.mp3'); 如果延迟 是其他代码性能影响了 预加载也没

[共通]手机端网页开发问题及解决方法整理

Q1:手机端开发网页,界面适应问题.A1: <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> width - viewport的宽度 height - viewport的高度    initial-scale - 初始的缩放比例    minimum-scale - 允许用户缩放到的最小比

iPhone X 适配手机端 H5 页面通用解决方案

一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战. 对于手Q中的各业务来说,受iPhone X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢? 目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下: 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone X在状

关于手机端audio无法自动播放问题解决方法

此方法可能只适用与用微信浏览器打开的页面... <audio id="a" src="bg.mp3" autoplay></audio> 第一步:引入微信js <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 第二步:wx.config wx.config({ debug: false, // 开启调试模式,调

手机端H5页面常见问题

1.Android点击图片或按钮和输入框的时候,会有阴影框的效果 解决方法: img,input,button{ -webkit-tap-highlight-color: transparent; }

手机端 H5上传头像

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name = "viewport" content= "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

手机端H5 header定义样式

<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> <meta name="apple-mobile-web-app-capable" content="no" /> <meta name="format-detection&q

手机端h5适配&lt;mete&gt;标签

apple-mobile-web-app-capable 设置Web应用是否以全屏模式运行. 语法: <meta name="apple-mobile-web-app-capable" content="yes"> 说明: 如果content设置为yes,Web应用会以全屏模式运行,反之,则不会.content的默认值是no,表示正常显示.你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示. 兼容性: i