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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
javascript实现拼图游戏
Jan 29 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 Pear 安装及使用
2009/03/19 PHP
php简单的会话类代码
2011/08/08 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
详解jQuery中的事件
2016/12/14 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python中偏函数partial用法实例分析
2015/07/08 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
应届生如何写自荐信
2014/01/05 职场文书
顶岗实习接收函
2014/01/09 职场文书
表彰会主持词
2014/03/26 职场文书
小学教师节活动总结
2015/03/20 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript