Javascript achieves interchange between latitude and longitude and address, and javascript latitude and longitude

Javascript achieves interchange between latitude and longitude and address, and javascript latitude and longitude

Recently used in the project to convert the address to latitude and longitude. I have never encountered this kind of problem since then. I learned it in advance and recorded what I learned.

I found a lot of information on the Internet, and finally confirmed that Baidu's API has an interface for implementation (API address ). When using APIs, you must apply for an accesskey for normal access.

　　

Is a principle, that is, when we pass in the corresponding value, the corresponding information is returned. Here I now return a json object, which is a bit complicated for XML operations and is omitted here. Note: When ajax is used, dataType must be JSONP. Otherwise, you will find the error slowly (this is also a place that took me a lot of time and has been depressed for a long time ). Here is JSONP because it is cross-origin. Now, the code is displayed:

1 <form id = "form1" runat = "server"> 2 <div style = "width: 500px; height: 100px; border: 1px solid; float: left; "> 3 <span style =" width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080; "> address: </span> 4 <input type = "text" id = "address" placeholder = "Three West section of yihuan Road, Jinniu District, Chengdu" style = "width: 300px; height: 30px; margin: 20px 0 0 0; "/> 5 <input type =" button "id =" search_address "value =" Search "style =" width: 60px; height: 30px; "/> 6 <br/> 7 <span id =" lng "style =" width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080; "> longitude: </span> <br/> 8 <span id =" lat "style =" width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080; "> latitude: </span> 9 </div> 10 <div style =" width: 500px; height: 500px; border: 1px solid; float: left; margin-left: 200px; "> 11 <span style =" width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080; "> longitude: </span> 12 <input type =" text "value =" "placeholder =" 104.05033320413 "id =" txtlng "style =" width: 300px; height: 20px; margin: 20px 0 0 0; "/> 13 <br/> 14 <span style =" width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080; "> latitude: </span> 15 <input type = "text" value = "" placeholder = "30.68458575873" id = "txtlat" style = "width: 300px; height: 20px; margin: 20px 0 0 0; "/> 16 <br/> 17 <input type =" button "id =" search_lng_lat "value =" Search "style =" height: 30px; margin-top: 12px; margin-left: 220px; "/> <br/> 18 <span id =" spanadderss "style =" width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080; "> address: </span> 19 </div> 20 </form>View Code 1 $ (document). ready (function () {2/* 3 obtain the latitude and longitude Based on the address information, and return the json object: 4 status Int. Return the result status value. Return 0 if the result is successful. 5 location object latitude and longitude coordinates 6 lat float latitude value 7 lng float longitude value 8 precise Int position additional information, whether to precisely find. 1 indicates exact search, and 0 indicates inaccurate search. 9 confidence Int reliability 10 level string address type 11 12 {13 status: 0, 14 result: 15 {16 location: 17 {18 lng: 116.30814954222, 19 lat: 40.056885091681 20 }, 21 precise: 1, 22 confidence: 80, 23 level: "Business Building" 24} 25} 26 */27 $ ('# search_address '). click (function () {28 var address = $. trim ($ ('# address '). val (); 29 if (address! = Undefined & address! = '') {30 var url =' http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address= '+ EncodeURIComponent (address); 31 // obtain latitude and longitude information based on the location name 32 $. ajax ({33 type: "POST", 34 url: url, 35 dataType: "JSONP", 36 success: function (data) {37 if (parseInt (data. status) = 0) {38 $ ("# lng" longitude .html ("longitude:" + data. result. location. lng); 39 $ ("# lat" ).html ("latitude:" + data. result. location. lat); 40} 41} 42}); 43} 44}); 45/* 46 obtain the detailed address and its surrounding information based on the latitude and longitude, and return the json object: 47 status constant: return the result status value. If the result is successful, return 0. For other values, see the appendix. 48 location 49 lat latitude coordinates 50 lng longitude coordinates 51 formatted_address structured address information 52 business district information, such as "Renmin University, Zhongguancun, suzhou street "53 addressComponent city name 54 district name 55 province provincial name 56 street name 57 street_number street house number 58 pois (surrounding poi array) 59 addr address information 60 cp data source 61 distance from coordinate point 62 name poi name 63 poiType poi type, such as 'Office building, Business Mansion '64 point poi coordinate {x, y} 65 tel 66 uid poi unique ID 67 zip code 68 */69 $ ('# search_lng_lat '). click (function () {70 var lng = $. trim ($ ('# txtlng '). val (); 71 var lat = $. trim ($ ('# txtlat '). val (); 72 var url =' http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location= '+ Lat + "," + lng; 73 $. ajax ({74 type: "POST", 75 url: url, 76 dataType: "JSONP", 77 success: function (data) {78 if (parseInt (data. status) = 0) {79 var result = "Address:" + data. result. formatted_address + "</br>"; 80 result + = "province name:" + data. result. addressComponent. province + "</br>"; 81 result + = "city name:" + data. result. addressComponent. city + "</br>"; 82 result + = "district/county name:" + data. result. addressComponent. district + "</br>"; 83 result + = "street name:" + data. result. addressComponent. street + "</br>"; 84 result + = "street number:" + data. result. addressComponent. street_number + "</br>"; 85 result + = "peripheral information: </br>"; 86 for (var I = 0; I <data. result. pois. length; I ++) {87 result + = "address information:" + data. result. pois [I]. addr 88 + ", data source:" + data. result. pois [I]. cp 89 + ", distance from coordinate point:" + data. result. pois [I]. distance 90 + ", poi name:" + data. result. pois [I]. name 91 + ", poi type:" + data. result. pois [I]. poiType 92 + ", poi coordinate x:" + data. result. pois [I]. point. x 93 + ", poi coordinate y:" + data. result. pois [I]. point. y 94 + ", tel:" + data. result. pois [I]. tel 95 + ", poi unique identifier:" + data. result. pois [I]. uid 96 + ", zip code:" + data.result.w. I }.zip + "</br>"; 97} 98 }('?spanadderss'}.html (result); 99} 100} 101}); 102 }); 103 });View Code

The Code already has a detailed explanation. If you really don't understand it, click the API address, which is more detailed here. Here is just my personal knowledge. I am only responsible for a record. If it helps you, I am also very happy.

Javascript calls Google's map to dynamically change the map by longitude and latitude

See this webpage.
Reference: www.zhongguosou.com/zonghe/dili_jingweidu.html
 
Who can use JavaScript to display points on a map, that is, adding a point (or a small circle) to a longitude or latitude)

I have an effect of using js to draw a circle. You can change it. You can keep the following code to see the effect:

<Html xmlns: v = "urn: schemas-microsoft-com: vml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> vml </title>
<Style>
V \: * {behavior: url (# default # VML );}
Body {padding: 0px; margin: 0px ;}
</Style>
</Head>

<Body>

<Div style = "position: absolute; top: 50px; left: 50px;"> draw an ellipse (ie only) with mousedown as the center </div>

<V: oval id = "oval1"
Strokecolor = "green" filled = "F"
Style = "position: absolute; top:-50px; left:-50px; width: 5px; height: 5px;">
</V: oval>

<Div style = "position: absolute; top: 1500px; left: 1500px; width: 50px; height: 50px;"> </div>

<Script type = "text/javascript">
Var ox = 0, oy = 0, w, h, r, start = 0;
Document. ondragstart = function () {return false ;}
Document. onselectstart = function () {return false ;}
Document. onmousedown = function (){
If (event. x> document. body. clientWidth | event. y> document. body. clientHeight) return;
Ox = event. x + document. body. scrollLeft, oy = event. y + document. body. scrollTop;
Document. onmousemove = _ mousemove;
Document. onmouseup = function () {document. onmousemove = null ;}
}
_ Mousemove = function (){
Var dx = (ox-event.x-document.body.scrollLeft), dy = oy-event.y-document.body.scrollTop;
If (dx = 0 & dy = 0) return;
Oval1.style. left = (ox-Math.abs (dx) + 'px ';
... The remaining full text>