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 相关文章推荐
jquery each()源代码
Feb 14 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 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
改造一台复古桌面收音机
2021/03/02 无线电
php懒人函数 自动添加数据
2011/06/28 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
javaScript中的空值和假值
2017/12/18 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python类的基础入门知识
2008/11/24 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python itertools模块详解
2015/05/09 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
启动仪式策划方案
2014/06/14 职场文书
苏州园林导游词
2015/02/03 职场文书
个人年终总结范文
2015/03/09 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
JS setTimeout与setInterval的区别
2022/04/20 Javascript