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

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=""
4000
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>