百度地图 第一个功能:点击地图获取坐标并获取省市区, 第二个功能:搜索地点,并获取坐标
/*html*/ <div class="col-lg-12"> <div class="col-lg-9"> <!--百度地图容器--> <div style="width: 100%; height: 500px;border:#ccc solid 1px;font-size:12px" id="allmap"></div> </div> <div class="col-lg-3"> <!--搜索输入框--> <div> <span>坐标:</span> <input type="text" id="shopcoord" name="lng_lat" value="{$info['lng_lat']}" readonly="readonly" class="form-control" placeholder="无需输入自动识别"> </div> <!--disabled="disabled"--> <p style="padding-top: 20px;"></p> <div id="r-result"> <i>*</i><span>公司详细地址:</span> <input class="form-control" name="dizhi" type="text" id="suggestId" size="20" value="{$info['dizhi']}" placeholder="公司地址" > </div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </div> </div> /*js*/ <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N"></script> <!--位置搜索 并获取到坐标--> <script type="text/javascript"> // 百度地图API功能 function G(id) { return document.getElementById(id); } var map = new BMap.Map("allmap"); map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。 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, 18); map.addOverlay(new BMap.Marker(pp)); //添加标注 var value_pp = pp.lng+','+pp.lat; $('#shopcoord').val(value_pp); } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } </script> <script> /*初始化 开始*/ var lnt_lag = "{$info['lng_lat']}"; if(lnt_lag){ var lng_val = "{$info['zuobiao_val'][0]}"; var lat_val = "{$info['zuobiao_val'][1]}"; }else{ var lng_val = "116.41566"; var lat_val = "39.940562"; } // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(lng_val,lat_val); map.centerAndZoom(point, 12); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var label = new BMap.Label("{$info['s_company']}",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); /*初始化 结束*/ /*地图缩放*/ setTimeout(function(){ map.setZoom(14); }, 2000); //2秒后放大到14级 map.enableScrollWheelZoom(true); </script> <script> /*点击地图 获取坐标 和详细地址*/ map.addEventListener("click",function(e){ var geocoder = new BMap.Geocoder(); var point = new BMap.Point(e.point.lng,e.point.lat); geocoder.getLocation(point,function(geocoderResult,LocationOptions){ //alert(geocoderResult.address); $('#suggestId').val(geocoderResult.address); }); //prompt("鼠标单击地方的经纬度为:",e.point.lng + "," + e.point.lat); var value_data = e.point.lng + "," + e.point.lat; $('#shopcoord').val(value_data); }); </script> <script> $(document).ready(function(){ setTimeout(function(){ $('#suggestId').val("{$info['dizhi']}"); },2000) }) </script>