本文實例講述了JS實現根據詳細地址獲取經緯度功能。分享給大家供大家參考，具體如下：
這個功能還是比較實用的，記錄分享一下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根據地址查詢經緯度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body style="background:#CBE1FF"> <div style="width:730px;margin:auto;"> 要查詢的地址：<input id="text_" type="text" value="鄭州大學" style="margin-right:100px;" /> 查詢結果(經緯度)： <input id="result_" type="text" /> <input type="button" value="查詢" onclick="searchByStationName();" /> <div id="container" style="position: absolute; margin-top:30px; width: 730px; height: 590px; top: 50; border: 1px solid gray; overflow:hidden;"> </div> </div> </body> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom("鄭州", 15); map.enableScrollWheelZoom(); //啟用滾輪放大縮小，默認禁用 map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認禁用 map.addControl(new BMap.NavigationControl()); //添加默認縮放平移控件 map.addControl(new BMap.OverviewMapControl()); //添加默認縮略地圖控件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打開 var localSearch = new BMap.LocalSearch(map); localSearch.enableAutoViewport(); //允許自動調節窗體大小 function searchByStationName() { map.clearOverlays(); //清空原來的標注 var keyword = document.getElementById("text_").value; localSearch.setSearchCompleteCallback(function(searchResult) { var poi = searchResult.getPoi(0); document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; map.centerAndZoom(poi.point, 13); var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 創建標注，為要查詢的地方對應的經緯度 map.addOverlay(marker); var content = document.getElementById("text_").value + "<br/><br/>經度：" + poi.point.lng + "<br/>緯度：" + poi.point.lat; var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>"); marker.addEventListener("click", function() { this.openInfoWindow(infoWindow); }); // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 }); localSearch.search(keyword); } </script></html>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
