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写的日历(代码部分网摘)
Sep 20 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Vue项目中设置背景图片方法
Feb 21 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
jQuery live
2009/05/15 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
jquery图片切换插件
2015/03/16 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
两只小狮子教学反思
2014/02/05 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
入股协议书
2014/04/14 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python