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操作web控件的自定义属性
Nov 25 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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/10/09 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
关于php中一些字符串总结
2016/05/05 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
JavaScript运算符小结
2015/06/03 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
应届生求职信范文
2014/06/30 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Nginx配置https的实现
2021/11/27 Servers