jsp页面调用百度接口点击返回坐标,能够搜索详细地址的案例

js代码:

        

$("#cityName").val($("#address").val());

$("#_DialogDiv_0").show();

var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;


    var point = new BMap.Point($("#jd").val(),$("#wd").val());    //创建点坐标

    var marker = new BMap.Marker(point);  // 创建标注

    map.addOverlay(marker);               // 将标注添加到地图中


    map.centerAndZoom(point, 14);                //初始化地图,设置中心点坐标和地图级别


    map.enableScrollWheelZoom();                //激活滚轮调整大小功能


    map.addControl(new BMap.NavigationControl());    //添加控件:缩放地图的控件,默认在左上角;


    map.addControl(new BMap.MapTypeControl());        //添加控件:地图类型控件,默认在右上方;


    map.addControl(new BMap.ScaleControl());        //添加控件:地图显示比例的控件,默认在左下方;


    map.addControl(new BMap.OverviewMapControl());  //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl    

  //单击获取点击的经纬度

    map.addEventListener("click",function(e){

        var jing_du_value = e.point.lng ;

        var wei_du_value =  e.point.lat;

        $("#jing_du").val(jing_du_value);

        $("#wei_du").val(wei_du_value);

    });

 


     search = new BMap.LocalSearch("中国", {


      onSearchComplete: function(result){


        if (search.getStatus() == BMAP_STATUS_SUCCESS){


          var res = result.getPoi(0);


          var point = res.point;


          map.centerAndZoom(point, 11);


        }


      },renderOptions: {  //结果呈现设置,


        map: map,  


        autoViewport: true,  


        selectFirstResult: true 


      } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。


        // alert(html.innerHTML)


      }//这一段可以不要,只不过是为学习更深层次应用而加入的。


    });

    

     search.search(document.getElementById("cityName").value);


}


// 点击搜索

function setCity(){

    search.search(document.getElementById("cityName").value);


 }


html:


<div>

<input type="text" id="cityName" value="郑州市"/>

<input type="button" οnclick="setCity()" value="查找" />

</div>

<div>

<label class="col-sm-3 control-label no-padding-right"

for="form-field-1-1">经度: </label>

<input name="hotelName" id="jing_du" 

placeholder="经度" style="width: 50px"

value="" type="text">

<label class="col-sm-3 control-label no-padding-right"

for="form-field-1-1">纬度: </label>

<input name="hotelName" id="wei_du" 

placeholder="纬度" 

value="" style="width: 50px" type="text">

</div>

<div id="container"

style="text-align:left;position: relative; width: 850px; height: 600px;">

<div

style="position: absolute; height: 100%; width: 100%; display: none; background-color:#fff; opacity: 0.5;"

id="_Covering_0">&nbsp;</div>

<iframe style="border:none 0;" id="_DialogFrame_0"

src="http://mp.lulinke.com:80/llk_hotel/hotelMessageSet/hotelMapLabel.do"

width="100%" height="100%" frameborder="0"></iframe>

</div>

<div style="text-align: center;">

<a class="btn btn-mini btn-primary" οnclick="selPoi();">确定</a>

<a class="btn btn-mini btn-danger" οnclick="quxiao();">取消</a>

</div>


js库:

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>


备注:把代码拷贝过去直接能用,根据自己的需求加以改动,详情参照百度地图api文档


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值