<!DOCTYPE html> <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, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; } #suggestId { position: absolute; z-index: 9999; right: 20px; top: 20px; line-height: 32px; padding: 0px 10px; width: 300px; border: 1px solid #e4e6e7; } #suggestId:focus { outline: none; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KxkuAcGBup6sD1XxaDW85KBG"></script> <title>点击地图获取当前经纬度</title> </head> <body> <input id="lng_input" type="hidden" value="{$lng}"/> <input id="lat_input" type="hidden" value="{$lat}"/> <input id="address_input" type="hidden"/> <input id="city_input" type="hidden"/> <input id="province_input" type="hidden"/> <input id="district_input" type="hidden"/> <input id="suggestId" type="text" placeholder="请输入地址"/> <div id="allmap"></div> <script type="text/javascript"> // 百度地图API功能 var center = new BMap.Point({$lng}, {$lat}); var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 8); map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); var map_ac = new BMap.Autocomplete( //建立一个自动完成的对象 { "input": "suggestId", "location": map }); var marker = new BMap.Marker(center); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.enableDragging(); //可拖拽 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); map_ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; function myFun() { var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 8); marker.setPosition(pp); mgetLocation(pp); } myValue = _value.province + _value.city + _value.district + _value.street + _value.business; var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); }); var opts = { width: 200, // 信息窗口宽度 height: 30, // 信息窗口高度 title: "", // 信息窗口标题 enableMessage: false,//设置允许信息窗发送短息 } var infoWindow = new BMap.InfoWindow("拖动我设置你的位置", opts); // 创建信息窗口对象 marker.openInfoWindow(infoWindow); var gc = new BMap.Geocoder(); function msetpoint(e) { document.getElementById("lng_input").value = e.point.lng; document.getElementById("lat_input").value = e.point.lat; marker.setPosition(new BMap.Point(e.point.lng, e.point.lat)); mgetLocation(e.point); } function mgetLocation(point) { gc.getLocation(point, function (rs) { var addComp = rs.addressComponents; marker.openInfoWindow(new BMap.InfoWindow(rs.address, opts)); document.getElementById("address_input").value = rs.address; document.getElementById("city_input").value = addComp.city; document.getElementById("province_input").value = addComp.province; document.getElementById("district_input").value = addComp.district; //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); } marker.addEventListener("dragend", msetpoint) map.addEventListener("click", msetpoint); function tilesloaded() { map.setCenter(center); //设置地图中心点。center除了可以为坐标点以外,还支持城市名 mgetLocation(center); // map.setZoom(8); //将视图切换到指定的缩放等级,中心点坐标不变 map.removeEventListener("tilesloaded", tilesloaded); } map.addEventListener("tilesloaded", tilesloaded); function confirm() { var data = {}; data.lng = document.getElementById("lng_input").value; data.lat = document.getElementById("lat_input").value; data.address = document.getElementById("address_input").value; data.city = document.getElementById("city_input").value; data.province = document.getElementById("province_input").value; data.district = document.getElementById("district_input").value; return data; } </script> </body> </html>