JavaScript实现经纬度转换成地址功能

 更新时间:2017年03月28日 09:25:02   作者:文艺小清新  
这篇文章主要介绍了JavaScript实现经纬度转换成地址,非常不错,具有参考借鉴价值,需要的朋友可以参考下

在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页面

这里写图片描述

如此即可通过JS实现简单的经纬度地址转换功能。

以上所述是小编给大家介绍的JavaScript实现经纬度转换成地址功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JS基于贪心算法解决背包问题示例

    JS基于贪心算法解决背包问题示例

    这篇文章主要介绍了JS基于贪心算法解决背包问题,简单说明了贪心算法的概念、原理,并结合具体实例形式分析了JS使用贪心算法解决部分背包问题的具体操作技巧,需要的朋友可以参考下
    2017-11-11
  • JS删除数组元素的函数介绍

    JS删除数组元素的函数介绍

    有时候我们需要数组元素的值,那么就可以参考下面的方法,文中提到了不少这方面的资料,数组去重功能等
    2013-03-03
  • js实现导航吸顶效果

    js实现导航吸顶效果

    本文主要分享了js实现导航吸顶效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 分享JavaScript与Java中MD5使用两个例子

    分享JavaScript与Java中MD5使用两个例子

    这篇文章主要为大家分享了JavaScript与Java中MD5使用两个例子,
    2015-12-12
  • JavaScript异步编程中async函数详解

    JavaScript异步编程中async函数详解

    async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise
    2022-11-11
  • javascript函数式编程实例分析

    javascript函数式编程实例分析

    这篇文章主要介绍了javascript函数式编程,实例分析了javascript函数式编程的相关使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 关于JS中的箭头函数

    关于JS中的箭头函数

    这篇文章主要介绍了关于JS中的箭头函数,ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义,箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数,省去关键字function,需要的朋友可以参考下
    2023-05-05
  • js实现贪吃蛇小游戏(容易理解)

    js实现贪吃蛇小游戏(容易理解)

    本文主要介绍了js实现贪吃蛇小游戏的步骤与方法,代码简单,容易理解。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • vant uploader实现上传图片拖拽功能(设为封面)

    vant uploader实现上传图片拖拽功能(设为封面)

    这篇文章主要介绍了vant uploader实现上传图片拖拽功能(设为封面),这个功能在日常生活中经常会用到,操作非常方便,今天通过实例代码介绍实现过程,需要的朋友可以参考下
    2021-10-10
  • 小程序实现列表展开收起效果

    小程序实现列表展开收起效果

    这篇文章主要为大家详细介绍了小程序实现列表展开收起效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07

最新评论