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比较两个数组的内容是否相同(推荐)
May 02 Javascript
纯JS实现简单的日历
Jun 26 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
swiper自定义分页器的样式
Sep 14 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 字符串 小常识
2009/06/05 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php汉字转拼音的示例
2014/02/27 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
js读写json文件实例代码
2014/10/21 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
javascript实现画板功能
2020/04/12 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
2016年寒假社会实践活动总结
2015/10/10 职场文书
《开国大典》教学反思
2016/02/16 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
mysql函数之截取字符串的实现
2022/08/14 MySQL