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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
JS常用函数使用指南
Nov 23 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
PassWord输入框代码分享
Jun 07 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
js实现简易拖拽的示例
Oct 26 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/05/16 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
全面了解js中的script标签
2016/07/04 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
JS二分查找算法详解
2017/11/01 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python字典及字典基本操作方法详解
2018/01/30 Python
详解Python正则表达式re模块
2019/03/19 Python
python用requests实现http请求代码实例
2019/10/31 Python
python 变量初始化空列表的例子
2019/11/28 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
工作时间上网检讨书
2014/02/03 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
uniapp开发小程序的经验总结
2021/04/08 Javascript
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL