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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
js正则匹配markdown里的图片标签的实现
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中的MVC模式运用技巧
2007/05/03 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python for循环remove同一个list过程解析
2019/08/14 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
利用Python优雅的登录校园网
2020/10/21 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
电大自我鉴定范文
2013/10/01 职场文书
合同协议书格式
2014/04/18 职场文书
公司合作意向书范文
2014/07/30 职场文书
抗洪救灾标语
2014/10/08 职场文书
责任书格式
2015/01/29 职场文书