通过百度地图获取填写的地理位置经纬度

1、场景

      后台添加门店的信息及门店的位置，通过点击地图查找在百度地图获取位置，并点击位置获取该位置的经纬度信息，并添加到数据库

    html页面代码：

        1、要引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> 

         2、   <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>门店地址：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" id="where" class="input-text" value="" placeholder=""  name="shop_Position">
                           <input id="but" type="button" value="地图查找" onClick="sear(document.getElementById('where').value);" class="btn btn-primary radius mt-10" />
                        </div>
                    </div>
        
                     <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>地图查找：</label>
                        <div class="formControls col-xs-8 col-sm-9">

                          //地图显示的容器：
                           <div style=" margin:auto;width:60%;height:300px;border:2px solid gray; margin-bottom:50px;" id="container">
                               
                           </div>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>门店经度：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" id="lonlat" name="lonlat"  maxlength="10">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>门店纬度：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input class="input-text" type="text" id="lonlat2" name="lonlat2"  maxlength="9">
                        </div>
                    </div>

//用到的js文件

<script type="text/javascript">
        var map = new BMap.Map("container");
        map.setDefaultCursor("crosshair");
        
        map.enableScrollWheelZoom();
        var point = new BMap.Point(105.386515,28.91124);
        map.centerAndZoom(point, 13);
        var gc = new BMap.Geocoder();
        
        map.addControl(new BMap.NavigationControl()); 
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.MapTypeControl());
        map.addControl(new BMap.CopyrightControl());
        
        var marker = new BMap.Marker(point);   
        map.addOverlay(marker);
        
        marker.addEventListener("click", function(e)
        {
                document.getElementById("lonlat").value = e.point.lng; 
                document.getElementById("lonlat2").value =e.point.lat; 
        }); 
        
        
        marker.enableDragging();
        
        marker.addEventListener("dragend",function(e)
        {
          gc.getLocation(e.point, function(rs)
          {
              showLocationInfo(e.point, rs);  
          });  
        });
        
    
        function showLocationInfo(pt, rs)
        {
            var opts = {  width : 250, height: 150, title : "当前位置" } ; 
            var addComp = rs.addressComponents;  
            var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";  
            addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;     
            var infoWindow = new BMap.InfoWindow(addr, opts); 
            marker.openInfoWindow(infoWindow);  
        } 
        
        map.addEventListener("click", function(e)
        {
                document.getElementById("lonlat").value = e.point.lng;
                document.getElementById("lonlat2").value = e.point.lat;
        });
        
         
        var traffic = new BMap.TrafficLayer();     
        map.addTileLayer(traffic);                    
        
        
        function iploac(result)
        {
            var cityName = result.name;
        }
        
        var myCity = new BMap.LocalCity();
        myCity.get(iploac);
        
        function sear(result)
        {
            // layer.open({
            //   type: 1,
            //   title: false,
            //   closeBtn: 0,
            //   shadeClose: true,
            //   skin: 'yourclass',
            //    btn: '关闭全部',
            //   content: '<div style=" margin:auto;width:1000px;height:600px;border:2px solid gray; margin-bottom:50px;" id="container"></div>',
            //   success:function(result){
               
            //   }
            // });
          var s = document.getElementById("container");
          s.style.display="block";
           var local = new BMap.LocalSearch(map, {renderOptions:{map: map} });
                local.search(result);
        }
        
</script>