移动端用户定位与自动填充

最新推荐文章于 2022-04-20 15:00:54 发布

月上谷

最新推荐文章于 2022-04-20 15:00:54 发布

阅读量722

点赞数

分类专栏：前端开发工程师文章标签： H5的地理位置定位移动自动填充标签内容 javascript css

本文链接：https://blog.csdn.net/weixin_37839390/article/details/78686165

版权

本文介绍了在移动端如何利用HTML5的地理位置定位技术，并结合jQuery处理定位数据，解决位置偏移、坐标精度问题，同时展示了如何将定位信息自动填充到input标签中，包括涉及到的CSS样式和JavaScript代码实现。

摘要由CSDN通过智能技术生成

1、使用到的技术

HTML+CSS+JS+jJquery+H5地理位置定位

2、遇到的问题

1）使用H5的地理位置定位方法，所获取到的位置会有偏移量
2）经纬度有长度限制，小数点后位数为14位
3）使用百度地图的时候，需要给地图设置宽、高和中心点范围，方可显示地图
填充内容的时候
4）在把定位的内容填充到标签里的时候，对于input标签，$('标签名').val(获取到的地址)
其他标签$('标签名').text(获取到的地址);

3、详细代码

引入外部文件

<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?你的密钥"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

css部分：

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