正文 3651字数 102,855阅读

输入省市，在百度地图中实现定位，可拖动，拖动后地址坐标存入input框中
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/> <title>Document</title> <style> #map_container { width: 1005px; margin: 0 auto; } #rMap { width: 600px; height: 500px; float: left; } #lSearch { width: 300px; height: 500px; float: left; } td { width: 100px; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"src="http://api.map.baidu.com/api?v=1.3"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet"href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/> </head> <body> <input type="text"id="longitude" /> <input type="text"id="latitude" /> <div class="bg_cover"></div> <div id="map_container"> <div id="rMap"></div> <div id="lSearch"> <table> <tr> <td>省份</td> <td><input type="text"class="txtProvince"/></td> </tr> <tr> <td>市</td> <td><input type="text"class="txtCity"/></td> </tr> <tr> <td>具体地址</td> <td><input type="text"class="txtDetail"/></td> </tr> <tr> <td> <button id="btnSearch">search</button> </td> </tr> </table> </div> </div> <script> $(function () { var map = new BMap.Map("rMap");//创建地图实例 var point = new BMap.Point(116.404, 39.915);//初始设置地图中心点，为天安门 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.centerAndZoom(point, 15); creatMarker(); $("#btnSearch").click(function () { var txt = $(".txtProvince").val() + $(".txtCity").val() + $(".txtDetail").val(); var lng, lat; if (txt !="") { var localSearch = new BMap.LocalSearch(map); map.clearOverlays();//清空原来的标注 localSearch.setSearchCompleteCallback(function (searchResult) { var poi = searchResult.getPoi(0); lng = poi.point.lng; lat = poi.point.lat; map.centerAndZoom(poi.point, 15); point = new BMap.Point(poi.point.lng, poi.point.lat); creatMarker(); }); localSearch.search(txt); } }) //创建地图遮盖物 function creatMarker() { var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.enableDragging(); //标注可拖拽 marker.addEventListener("click", function (e) { searchInfoWindow.open(marker); }) marker.addEventListener("dragend", function (e) { //监听标注的dragend事件，获取拖拽后地理坐标 $("#longitude").val(e.point.lng); $("#latitude").val(e.point.lat); var pt = e.point; }) var label = new BMap.Label("拖动图标可以定位哦~", {offset: new BMap.Size(20, -10)}); marker.setLabel(label); map.addOverlay(marker); //在地图中添加marker marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 }; }) </script> </body> </html>
Run code
Cut to clipboard