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開發(fā)過程中，需要將返回的經(jīng)緯度轉(zhuǎn)換成中文地址，一番折騰后得以實(shí)現(xiàn)，總結(jié)如下

原理分析：

百度地圖API提供了一個(gè)JS庫，我們只需要用這個(gè)接口就可以實(shí)現(xiàn)轉(zhuǎn)換功能，這里我寫一個(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文件中寫入上圖中的代碼，調(diào)用函數(shù)即可通過傳入的經(jīng)緯度獲取到中文地址，以成都為例，打開HTML頁面

這里寫圖片描述

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

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

您可能感興趣的文章:

相關(guān)文章

JS基于貪心算法解決背包問題示例
這篇文章主要介紹了JS基于貪心算法解決背包問題,簡(jiǎn)單說明了貪心算法的概念、原理,并結(jié)合具體實(shí)例形式分析了JS使用貪心算法解決部分背包問題的具體操作技巧,需要的朋友可以參考下
2017-11-11
JS刪除數(shù)組元素的函數(shù)介紹
有時(shí)候我們需要數(shù)組元素的值，那么就可以參考下面的方法，文中提到了不少這方面的資料，數(shù)組去重功能等
2013-03-03
js實(shí)現(xiàn)導(dǎo)航吸頂效果
本文主要分享了js實(shí)現(xiàn)導(dǎo)航吸頂效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
分享JavaScript與Java中MD5使用兩個(gè)例子
這篇文章主要為大家分享了JavaScript與Java中MD5使用兩個(gè)例子，
2015-12-12
JavaScript異步編程中async函數(shù)詳解
async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。 async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例，并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫出基于Promise的異步行為，而無需刻意地鏈?zhǔn)秸{(diào)用promise
2022-11-11
javascript函數(shù)式編程實(shí)例分析
這篇文章主要介紹了javascript函數(shù)式編程,實(shí)例分析了javascript函數(shù)式編程的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
關(guān)于JS中的箭頭函數(shù)
這篇文章主要介紹了關(guān)于JS中的箭頭函數(shù),ES6中允許使用=>來定義函數(shù)。箭頭函數(shù)相當(dāng)于匿名函數(shù)，并簡(jiǎn)化了函數(shù)定義,箭頭函數(shù)在語法上比普通函數(shù)簡(jiǎn)潔多。箭頭函數(shù)就是采用箭頭=>來定義函數(shù)，省去關(guān)鍵字function,需要的朋友可以參考下
2023-05-05
js實(shí)現(xiàn)貪吃蛇小游戲（容易理解）
本文主要介紹了js實(shí)現(xiàn)貪吃蛇小游戲的步驟與方法，代碼簡(jiǎn)單，容易理解。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
vant uploader實(shí)現(xiàn)上傳圖片拖拽功能(設(shè)為封面)
這篇文章主要介紹了vant uploader實(shí)現(xiàn)上傳圖片拖拽功能(設(shè)為封面),這個(gè)功能在日常生活中經(jīng)常會(huì)用到，操作非常方便，今天通過實(shí)例代碼介紹實(shí)現(xiàn)過程，需要的朋友可以參考下
2021-10-10
小程序?qū)崿F(xiàn)列表展開收起效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)列表展開收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07