快捷導(dǎo)航

JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能

更新時(shí)間：2017年03月28日 09:25:02 作者：文藝小清新

這篇文章主要介紹了JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

在webAPP開(kāi)發(fā)過(guò)程中，需要將返回的經(jīng)緯度轉(zhuǎn)換成中文地址，一番折騰后得以實(shí)現(xiàn)，總結(jié)如下

原理分析：

百度地圖API提供了一個(gè)JS庫(kù)，我們只需要用這個(gè)接口就可以實(shí)現(xiàn)轉(zhuǎn)換功能，這里我寫(xiě)一個(gè)簡(jiǎn)單的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);
//參數(shù)解析 
//@parameter1 lng 傳入的經(jīng)度 
//@parameter2 lat 傳入的緯度

在JS文件中寫(xiě)入上圖中的代碼，調(diào)用函數(shù)即可通過(guò)傳入的經(jīng)緯度獲取到中文地址，以成都為例，打開(kāi)HTML頁(yè)面

這里寫(xiě)圖片描述

如此即可通過(guò)JS實(shí)現(xiàn)簡(jiǎn)單的經(jīng)緯度地址轉(zhuǎn)換功能。

以上所述是小編給大家介紹的JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js仿QQ郵箱收件人選擇與搜索功能
這篇文章主要為大家詳細(xì)介紹了js仿QQ郵箱收件人選擇與搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript——DOM操作——Window.document對(duì)象詳解
下面小編就為大家?guī)?lái)一篇JavaScript——DOM操作——Window.document對(duì)象詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
給easyui datebox擴(kuò)展一個(gè)清空的實(shí)例
下面小編就為大家?guī)?lái)一篇給easyui datebox擴(kuò)展一個(gè)清空按鈕的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
JavaScript注冊(cè)監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng)事件方式詳解
js中事件監(jiān)聽(tīng)就是利用addEventListener來(lái)綁定一個(gè)事件,這個(gè)用法在jquery中非常常用并且簡(jiǎn)單,但在原生js中比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于JavaScript注冊(cè)監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng)事件方式的相關(guān)資料,需要的朋友可以參考下
2023-05-05
JS限制input框只能輸入0~100的正整數(shù)的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)JS限制input框只能輸入0~100的正整數(shù),方法二是直接通過(guò)設(shè)置三個(gè)屬性,type、min、max即可,就可以設(shè)置0~100的整數(shù),感興趣的朋友跟隨小編一起看看吧
2024-02-02
javascript時(shí)間函數(shù)基礎(chǔ)介紹
這篇文章主要介紹了javascript中提供了Date對(duì)象來(lái)進(jìn)行時(shí)間和日期的計(jì)算，這里簡(jiǎn)單的介紹下，方便需要的朋友
2013-03-03
現(xiàn)代 JavaScript 開(kāi)發(fā)編程風(fēng)格Idiomatic.js指南中文版
下面的章節(jié)描述的是一個(gè) 合理的現(xiàn)代 JavaScript 開(kāi)發(fā)風(fēng)格指南，并非硬性規(guī)定。其想送出的核心理念是高度統(tǒng)一的代碼風(fēng)格（the law of code style consistency）。
2014-05-05
原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法，由于遇到相關(guān)序列化的問(wèn)題，但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制，導(dǎo)致不能用$.param來(lái)序列化參數(shù)，下面小編給大家分享了實(shí)例代碼，需要的朋友參考下吧
2018-08-08
JS實(shí)現(xiàn)無(wú)限級(jí)網(wǎng)頁(yè)折疊菜單(類(lèi)似樹(shù)形菜單)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)無(wú)限級(jí)網(wǎng)頁(yè)折疊菜單(類(lèi)似樹(shù)形菜單)效果代碼,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁(yè)面元素結(jié)點(diǎn)的遍歷及樣式操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
JS匿名函數(shù)類(lèi)生成方式實(shí)例分析
這篇文章主要介紹了JS匿名函數(shù)類(lèi)生成方式,結(jié)合實(shí)例形式分析了javascript匿名函數(shù)類(lèi)相關(guān)屬性與方法定義與使用技巧,需要的朋友可以參考下
2016-11-11