js 百度地图API 搜索 返回 经纬度和地址

html


<form class="modal  fade" id="myModal" tabindex="-1" role="dialog" >

                                            <div  style="width:680px;height:700px;">
                                                <div class="modal-content" style="height:700px;">
                                                    <div class="modal-header" style="height:50px;">
                                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                                        <h4 class="modal-title">百度地图</h4>
                                                    </div>
                                                    <div class="modal-body" style="height:550px;">
                                                        <div class="col-sm-9">                                                    
                                                            <input type="text" id="mapCity" name="city" class="col-xs-10 col-sm-2" placeholder="城市名" />                                                  
                                                            <input type="text" id="mapAdress" name="mapAdress" class="col-xs-10 col-sm-5" placeholder="地点" value="${entity.f_address!}"/>
                                                            <input type ="button" id="search"  value="搜索" style="width: 50px;height:30px;" />
                                                        </div>
                                                        <div class="space-4"></div>
                                                        <div class="col-sm-9">
                                                        </div>
                                                        <div class="form-group"  >
                                                            <div class="col-sm-9">
                                                                <div id="baiduMap" style="width:600px;height:500px;">
                                                                </div>
                                                                <span id="mapAddress"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                                                      
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal-dialog -->
                                        <!-- /.modal -->                                  

  </form>


js


var map = new BMap.Map("baiduMap");
            map.centerAndZoom(new BMap.Point(121.446102,31.283787), 11);
            map.enableScrollWheelZoom();
            var geoc = new BMap.Geocoder();
            //获取选中地点的经纬度
            var marker;
            var point ;

//鼠标事件

            map.addEventListener("click", function(e){
                point =e.point;
                addMarker(point);
            });

// 返回地址 和经纬度

           function addMarker(point,resetView) {
                if(resetView){
                    map.centerAndZoom(point,15);
                }
                //获得选中的点,标记他
                if(marker)
                    map.removeOverlay(marker);
                marker = new BMap.Marker(point)
                map.addOverlay(marker);
                
                //清除搜索记录
                geoc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents;
                    //打开信息窗口
                    $("#latitude").val(point.lat);
                    $("#longitude").val(point.lng);
                  
                    if($("#storeAddress").val()==null ||$("#storeAddress").val()==""){
                        $("#storeAddress").val(addComp.city+addComp.district+addComp.street+addComp.streetNumber)
                    }
                    $("#mapAddress").html( addComp.city + addComp.district + addComp.street  + addComp.streetNumber);
                });
               
            }


$("#search").click(function (){
                //$("txtResult").value=""//每次生成前清空文本域  
                    map.clearOverlays(); //清除地图上所有标记  
                var city = $("#mapCity").val();
                var address = $("#mapAdress").val();
                if(city==null || city==""){
                    alert("请输入城市名称");
                    return;
                }
                if(address==null || address==""){
                    alert("请输入地点");
                    return;
                }
                  
                var local = new BMap.LocalSearch(city,{
                                  renderOptions:{
                                      map: map,
                                      panel: "results",//结果容器id  
                                      autoViewport: true,   //自动结果标注  
                                      selectFirstResult: true, //指定到第一个目标
                                      enableRouteSearchBox: true,
                                      enableRouteInfo:true
                                  },
                                  pageCapacity: 1
                   });
                

                       // 获取搜索点数据

                  local.setSearchCompleteCallback(function (searchResult) {
                       var poi = searchResult.getPoi(0);
                          addMarker(poi.point,true);
                      });
                   local.search(address);
            });


参考百度API   http://lbsyun.baidu.com/index.php?title=jspopular

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值