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 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JS实现简易日历效果
Jan 25 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python聊天室程序(基础版)
2018/04/01 Python
django 单表操作实例详解
2019/07/30 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
教师推荐信范文
2013/11/24 职场文书
财会自我鉴定范文
2013/12/27 职场文书
法院信息化建设方案
2014/05/21 职场文书
热门专业求职信
2014/05/24 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
企业委托书范本
2014/09/13 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers