JS使用百度地图API自动获取地址和经纬度操作示例
程序员文章站
2024-01-12 19:20:34
本文实例讲述了js使用百度地图api自动获取地址和经纬度操作。分享给大家供大家参考,具体如下:
在实际工作中我们经常会遇到这样的问题,但是当我们去看百度api的时候往往又...
本文实例讲述了js使用百度地图api自动获取地址和经纬度操作。分享给大家供大家参考,具体如下:
在实际工作中我们经常会遇到这样的问题,但是当我们去看百度api的时候往往又达不到我们的要求。
故此,本篇博文讲述如何使用百度地图api自动获取地址和经纬度:
1、html代码如下
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>点击地图获取地址和经纬度map,address,lng,lat</title> <meta name="robots" content="noindex, nofollow"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- 将百度地图api引入,设置好自己的key --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6qkaiilzftimmkgaflg7qt1glfincg"></script> </head> <body> <div class="main-div"> <form method="post" action="" name="theform" enctype="multipart/form-data" onsubmit="return validate()"> <table cellspacing="1" cellpadding="3" width="100%"> <tr> <td class="label">经度</td> <td><input type="text" name="lng" id="lng" value=""/> </td> </tr> <tr> <td class="label">纬度</td> <td><input type="text" name="lat" id="lat" value=""/> </td> </tr> <tr> <td class="label">地址</td> <td> <input type='text' value='' name='sever_add' id='sever_add' readonly> <input type='button' value='点击显示地图获取地址经纬度' id='open'> </td> </tr> </table> </form> <div id='allmap' style='width: 50%; height: 50%; position: absolute; display: none'></div> </div> </body> </html>
2、js代码如下
<script type="text/javascript"> function validate() { var sever_add = document.getelementsbyname('sever_add')[0].value; if (isnull(sever_add)) { alert('请选择地址'); return false; } return true; } //判断是否是空 function isnull(a) { return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false; } document.getelementbyid('open').onclick = function () { if (document.getelementbyid('allmap').style.display == 'none') { document.getelementbyid('allmap').style.display = 'block'; } else { document.getelementbyid('allmap').style.display = 'none'; } } var map = new bmap.map("allmap"); var geoc = new bmap.geocoder(); //地址解析对象 var markersarray = []; var geolocation = new bmap.geolocation(); var point = new bmap.point(116.331398, 39.897445); map.centerandzoom(point, 12); // 中心点 geolocation.getcurrentposition(function (r) { if (this.getstatus() == bmap_status_success) { var mk = new bmap.marker(r.point); map.addoverlay(mk); map.panto(r.point); map.enablescrollwheelzoom(true); } else { alert('failed' + this.getstatus()); } }, {enablehighaccuracy: true}) map.addeventlistener("click", showinfo); //清除标识 function clearoverlays() { if (markersarray) { for (i in markersarray) { map.removeoverlay(markersarray[i]) } } } //地图上标注 function addmarker(point) { var marker = new bmap.marker(point); markersarray.push(marker); clearoverlays(); map.addoverlay(marker); } //点击地图时间处理 function showinfo(e) { document.getelementbyid('lng').value = e.point.lng; document.getelementbyid('lat').value = e.point.lat; geoc.getlocation(e.point, function (rs) { var addcomp = rs.addresscomponents; var address = addcomp.province + addcomp.city + addcomp.district + addcomp.street + addcomp.streetnumber; if (confirm("确定要地址是" + address + "?")) { document.getelementbyid('allmap').style.display = 'none'; document.getelementbyid('sever_add').value = address; } }); addmarker(e.point); } </script>
将js代码放入到html中,我们可以得到效果图如下:
更多关于javascript相关内容还可查看本站专题:《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript操作dom技巧总结》及《javascript字符与字符串操作技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: Tomcat中的重要配置