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 CSS修改学习第一章 查找位置
Feb 19 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
vue+canvas实现移动端手写签名
May 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP多文件上传类实例
2015/03/07 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
利用python实现命令行有道词典的方法示例
2017/01/31 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
单位婚育证明范本
2014/11/21 职场文书
纪检监察立案决定书
2015/06/24 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
MySQL添加索引特点及优化问题
2022/07/23 MySQL