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库还是自己写代码?
Jan 28 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
extjs render 用法介绍
Sep 11 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
js实现页面图片消除效果
Mar 24 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设计模式之调解者模式的深入解析
2013/06/13 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python 图片验证码代码
2008/12/07 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python实现的简单计算器功能详解
2018/08/25 Python
破解安装Pycharm的方法
2018/10/19 Python
Python 加密与解密小结
2018/12/06 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
django中的图片验证码功能
2019/09/18 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python递归函数用法详解
2020/10/26 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
社团成立邀请函
2014/01/08 职场文书
初一英语教学反思
2014/01/11 职场文书
装修五一活动策划案
2014/01/23 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
中秋节主持词
2014/04/02 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL