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实现悬浮按钮组件
Dec 17 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
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/12/06 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python数据结构之单链表详解
2017/09/12 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python装饰器深入学习
2018/04/06 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python基于win32api实现键盘输入
2020/12/09 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
软件测试企业面试试卷
2016/07/13 面试题
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2014年客房部工作总结
2014/11/22 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python