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 相关文章推荐
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
js字符编码函数区别分析
2008/06/05 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
个性发展自我评价
2014/02/11 职场文书
公司拓展活动方案
2014/02/13 职场文书
计算机网络专业求职信
2014/06/05 职场文书
春游踏青活动方案
2014/08/14 职场文书
元旦标语大全
2014/10/09 职场文书
教师业务学习材料
2014/12/16 职场文书
国情备忘录观后感
2015/06/04 职场文书
电影开国大典观后感
2015/06/04 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL