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>
