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

本文介绍了一个使用百度地图API实现地图展示、地点搜索及经纬度获取的示例。通过JavaScript操作DOM元素并结合百度地图API,实现了城市名输入、地图显示、点击获取经纬度等功能。

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" onclick="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" onclick="selPoi();">确定</a>

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

</div>


js库:

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


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


JS JSP ASP .NET J2AM API接口返回的版本 目前所有版本的JS JSP ASP .NET J2AM 都是提供源代码的,对于一些脚本语言来说,直接解压缩之后就可以使用了,不需要什么安装步骤。另外一些需要编译的语言,则提供了编译用的 shell 文件(Linux/Unix 下使用)和 bat 文件(Windows 下使用),或者直接提供编译好的二进制库文件。 不过为了让读者能够更清楚如何安装,我们还是对每种语言的安装都做详细的讲解,你可以在安装列表里找到你感兴趣的语言的安装方法。 示例 如果你已经把 JS JSP ASP .NET J2AM 安装好了,那么接下来就让我们开始第一个小程序吧。按照惯例,第一个演示程序几乎总是 HelloWorld,我们也不想打破这个惯例,不过对于 PHPRPC 来说,有服务器端就要有客户端,否则我们就没有什么好演示的啦,所以我们的第一个演示程序实际上是两个,一个是服务器端,另一个是客户端。我们都先用 PHP 语言来写好了。 服务器端 view plaincopy to clipboardprint? <?php include ("php/phprpc_server.php"); function HelloWorld() { return 'Hello World!'; } $server = new PHPRPC_Server(); $server->add('HelloWorld'); $server->start(); ?> 客户端 view plaincopy to clipboardprint? <?php include ("php/phprpc_client.php"); $client = new PHPRPC_Client('http://127.0.0.1/server.php'); echo $client->HelloWorld(); ?> 对于服务器端程序,我们应该将它命名为 server.php(这是因为客户端调用时用的是这个名字,而不是 PHPRPC 的什么规定),然后把它放在本地 Web 服务器的根目录下,并保证服务器可以正常运行 PHP 程序,之后在浏览器或命令行下运行客户端程序,你就可以看到结果了。 这两个程序几乎简单到无需解释的地步,所以如果你已经明白它们的意思,那么就可以直接跳过下面的解释,继续看后面的例子。 服务器端第 1 句是将 它的服务器端程序包含到你的程序里,之后的 2 - 4 句是定义一个远程调用的函数,你会发现它与本地函数没有任何区别。第 5 句是创建服务器端对象,第 6 句是添加要发布的方法,这里添加的就是刚刚定义的 HelloWorld 函数,在 PHP 中,添加的发布方法是函数名的字符串表示,在其它语言中可能略有不同。第 7 句是启动服务。 客户端就更简单了,第 1 句是将 它的客户端程序包含到你的程序里。第 2 句是创建客户端对象,其中的参数就是服务器端的地址。第 3 句是对远程方法(函数)的调用,之后通过 echo 将它显示出来。如果顺利的话,执行后你就会看到输出的 Hello World!。 上面的例子是发布的是函数,下面我们来看一下类中的静态方法如何发布: view plaincopy to clipboardprint? <?php include ("php/phprpc_server.php"); class Hello { static function HelloWorld() { return 'Hello World!'; } } $server = new PHPRPC_Server(); $server->add('HelloWorld', 'Hello'); $server->start(); ?> 这个服务器端只要它的名字与发布的地址与上面那个发布函数的例子一样的话,上面的那个客户端就可以得到同样的结果,也就是说,在客户端看来是没有任何区别的。 它并不是只可以在 PHP 中使用,它同样支持其它语言的服务器和客户端,而且还可以无差别的相互调用。 现在我们来看一下如何在 Java 中调用这个 PHP 的服务器方法: view plaincopy to clipboardprint? import org.phprpc.*; interface IHello { public String helloWorld(); } public class HelloWorld { public static void main ( String [] args ) { PHPRPC_Client client = new PHPRPC_Client("http://127.0.0.1/server.php"); IHello clientProxy = (IHello)client.useService(IHello.class); System.out.println(clientProxy.helloWorld()); } } 当我们把这个例子编译之后,在命令行中输入以下命令就可以看到执行结果了: java -classpath .;phprpc_client.jar HelloWorld 这个 Java 的客户端看上去比 PHP 的要稍微复杂一些,不过仍然很好理解。在 Java 客户端中,我们使用了接口来描述远程方法,之后我们通过 useService 方法返回一个远程代理对象,该对象实现了我们定义的接口,之后我们就可以直接调用远程方法 helloWorld 了。如果你比较细心的话,你还会发现我们在 PHP 中定义的方法和在 Java 中定义的接口的名字的大小写有点不同,但是仍然可以正常调用。是的,PHPRPC 发布的方法是不区分大小写的。所以不论你所使用的语言是否区分大小写,都可以按照自己(或语言)的习惯来定义方法名。 在本章的最后,我们再来看一下在 JavaScript 如何调用它的服务。顺便再强调一下,服务器端不止是可以用 PHP 来编写,你同样可以使用其它语言(比如 Java,.NET,Ruby,Python 等),这里我们只是以 PHP 为例而已。在这个例子中你还会看到如何使用加密传输。 view plaincopy to clipboardprint? <html> <head> <title>HelloWorld</title> [removed][removed] [removed] var client = new PHPRPC_Client('http://127.0.0.1/server.php', ['HelloWorld']); client.setEncryptMode(2); client.HelloWorld(function (result) { alert(result); }); [removed] </head> <body> </body> </html> 这个 JavaScript 是在网页中运行的,这里建议大家要把 head 和 body 标签都写全,即使它们对你来说看上去没有什么用处,但是在有些浏览器中,如果这些标签没有写全,或者写的不正确,程序就不能正确运行。 在这个例子中,我们会发现在创建 PHPRPC_Client 对象时,除了要写服务器地址以外,还要将远程方法的名字作为参数,因为远程方法可能不止一个,所以这个参数是数组类型的。 client.setEncryptMode(2); 这句是设置加密传输,参数 2 表示双向加密,就是参数和结果都加密(只不过这个 HelloWorld 比较特殊,它没有参数)。 接下来就是调用远程方法 HelloWorld 了,我们会发现它跟 PHP 和 Java 客户端的调用不太一样。是的,在 JavaScript 中远程调用都是采用异步方式的,也就是说要获得结果,需要用回调函数,回调函数作为远程方法的最后一个参数,回调函数也有四个参数,这里我们只使用第一个参数,也就是返回结果 result,通过 alert(result); 我们就可以在浏览器中看到最后弹出的 Hello World! 提示框了。 通过上面的例子,我们已经看到在 PHP、Java 和 JavaScript 这三种语言中使用 PHPRPC 都很简单,但因为语言的不同,在写法和用法上又有一些差别。不过你不用担心其它的语言跟它们也会有很大的差别,因为在接下来的章节中你很快就会发现其它语言跟这上面三种语言实现的写法和用法上的相似或相同之处了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值