<span style="white-space:pre"> </span><div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="" style="width:150px;" /></div>
<div id="allmap" style="height:300px;width:100%;"></div>
<div style="width:500px; height:auto;">
经度：<input type="text" class="text input-medium" name="locationx" id= "locationx" style = "width:350px;">
</div>
<div style="width:500px; height:auto;">
纬度：<input type="text" class="text input-medium" name="locationy" id= "locationy" style = "width:350px;">
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<pre name="code" class="javascript"><script type="text/javascript"> // 百度地图API功能 function G(id) { return document.getElementById(id); } function showInfo(e){ document.getElementById("locationx").value = e.point.lng; document.getElementById("locationy").value = e.point.lat; var now_point = new BMap.Point(e.point.lng, e.point.lat ); marker.setPosition(now_point);//设置覆盖物位置 } var city = document.getElementById('suggestId').value; var map = new BMap.Map("allmap"); var point = new BMap.Point(121.622957, 38.919523); map.centerAndZoom(point, 17); map.addEventListener("click", showInfo); var marker = new BMap.Marker(point); //创建marker对象 marker.enableDragging(); //marker可拖拽 //拖拽结束事件 marker.addEventListener("dragend", function(e){ //获取覆盖物位置 var o_Point_now = marker.getPosition(); var lng = o_Point_now.lng; var lat = o_Point_now.lat; //e.point.lng 地理经度。 // e.point.lat 地理纬度。 //alert(e.point.lng + "---, " + e.point.lat); get_lng_lat(); }) map.addOverlay(marker); //在地图中添加marker function get_lng_lat(){ //返回覆盖物标注的地理坐标。 var o_Point_now = marker.getPosition(); var lng = o_Point_now.lng; var lat = o_Point_now.lat; document.getElementById("locationx").value = lng; document.getElementById("locationy").value = lat; } // 初始化地图,设置城市和地图级别。 var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "suggestId" ,"location" : map }); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地图上所有覆盖物 function myFun(){ var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 17); map.removeEventListener("click", showInfo); var marker = new BMap.Marker(pp); //创建marker对象 map.addOverlay(marker); //在地图中添加marker marker.enableDragging(); //marker可拖拽 map.addEventListener("click", function(e){ map.clearOverlays(); var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); map.addOverlay(marker); marker.enableDragging(); //marker可拖拽 document.getElementById("locationx").value = e.point.lng; document.getElementById("locationy").value = e.point.lat; }); marker.addEventListener("dragend", function(e){ //获取覆盖物位置 var opn = marker.getPosition(); var lng = opn.lng; var lat = opn.lat; //e.point.lng 地理经度。 // e.point.lat 地理纬度。 //alert(e.point.lng + "---, " + e.point.lat); get_lng_lat1(); }) function get_lng_lat1(){ //返回覆盖物标注的地理坐标。 var opn = marker.getPosition(); var lng = opn.lng; var lat = opn.lat; document.getElementById("locationx").value = lng; document.getElementById("locationy").value = lat; } } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); }</script>
<script src="jquery.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>
