JavaScript实现经纬度转换成地址功能


Posted in Javascript onMarch 28, 2017

在webAPP开发过程中,需要将返回的经纬度转换成中文地址,一番折腾后得以实现,总结如下

原理分析:

百度地图API提供了一个JS库,我们只需要用这个接口就可以实现转换功能,这里我写一个简单的demo,与君共勉

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
    #allmap {width:100%;height:100%;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
  <title>逆地址解析</title>
</head>
<body>
  <div id="allmap"></div>
<script type="text/javascript" src="mapapi.js"></script>
</body>
</html>
function map_click(lng,lat){ 
var map = new BMap.Map(“allmap”); 
var point = new BMap.Point(lng,lat); 
map.centerAndZoom(point,12); 
var geoc = new BMap.Geocoder(); 
geoc.getLocation(point,function(rs){ 
var addComp = rs.addressComponents; 
alert(addComp.province + “, ” + addComp.city + “, ” + addComp.district + “, ” + addComp.street + “, ” + addComp.streetNumber); 
}); 
}
map_click(104.098225,30.56028);
//参数解析 
//@parameter1 lng 传入的经度 
//@parameter2 lat 传入的纬度

在JS文件中写入上图中的代码,调用函数即可通过传入的经纬度获取到中文地址,以成都为例,打开HTML页面

JavaScript实现经纬度转换成地址功能

如此即可通过JS实现简单的经纬度地址转换功能。

以上所述是小编给大家介绍的JavaScript实现经纬度转换成地址功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jQuery 表格插件整理
Apr 27 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
js实现多行文本框统计剩余字数功能
Mar 28 #Javascript
js实现下拉框效果(select)
Mar 28 #Javascript
vue2.0获取自定义属性的值
Mar 28 #Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 #Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 #Javascript
Vue中的v-cloak使用解读
Mar 27 #Javascript
js实现抽奖效果
Mar 27 #Javascript
You might like
十天学会php之第三天
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
windows下python和pip安装教程
2018/05/25 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python开启debug模式的方法
2019/06/27 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
详解python中的数据类型和控制流
2019/08/08 Python
python下载库的步骤方法
2019/10/12 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
个性发展自我评价
2014/02/11 职场文书
工作睡觉检讨书
2014/02/25 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
英语教师岗位职责
2014/03/16 职场文书
年会搞笑主持词
2014/03/27 职场文书
小学班级管理心得体会
2016/01/07 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL