JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能
在webAPP開發(fā)過程中,需要將返回的經(jīng)緯度轉(zhuǎn)換成中文地址,一番折騰后得以實(shí)現(xiàn),總結(jié)如下
原理分析:
百度地圖API提供了一個JS庫,我們只需要用這個接口就可以實(shí)現(xiàn)轉(zhuǎ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)簡單的經(jīng)緯度地址轉(zhuǎn)換功能。
以上所述是小編給大家介紹的JavaScript實(shí)現(xiàn)經(jīng)緯度轉(zhuǎn)換成地址功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript——DOM操作——Window.document對象詳解
下面小編就為大家?guī)硪黄狫avaScript——DOM操作——Window.document對象詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07給easyui datebox擴(kuò)展一個清空的實(shí)例
下面小編就為大家?guī)硪黄oeasyui datebox擴(kuò)展一個清空按鈕的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式詳解
js中事件監(jiān)聽就是利用addEventListener來綁定一個事件,這個用法在jquery中非常常用并且簡單,但在原生js中比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式的相關(guān)資料,需要的朋友可以參考下2023-05-05JS限制input框只能輸入0~100的正整數(shù)的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)JS限制input框只能輸入0~100的正整數(shù),方法二是直接通過設(shè)置三個屬性,type、min、max即可,就可以設(shè)置0~100的整數(shù),感興趣的朋友跟隨小編一起看看吧2024-02-02現(xiàn)代 JavaScript 開發(fā)編程風(fēng)格Idiomatic.js指南中文版
下面的章節(jié)描述的是一個 合理 的現(xiàn)代 JavaScript 開發(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)序列化的問題,但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制,導(dǎo)致不能用$.param來序列化參數(shù),下面小編給大家分享了實(shí)例代碼,需要的朋友參考下吧2018-08-08JS實(shí)現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)針對頁面元素結(jié)點(diǎn)的遍歷及樣式操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09