百度地图LBS应用开发代码

最近因为工作需要，领导要我将51地图API开发的一个应用迁移到百度地图，或者说用百度地图API进行重写，实现同样的功能。我先是把现有的这个51地图的应用了解了一下，然后就试着用百度地图做一些demo，最后就自己动手参照原来的应用的功能，用百度地图实现了一下。下面就给大家介绍一下，百度地图API开发的一些基础技术。

首先，百度地图API的官方首页是：http://dev.baidu.com/wiki/static/index.htm，上面介绍了很多详细的信息，各种版本的API，成功案例，还有在线帮助文档，当然了这些文档也可以下载下来离线查阅。在web中使用百度地图API进行开发，主要是用到百度地图JavaScript版，也就是用JS进行开发。百度地图封装了具体实现的细节，我们作为程序员，只要按照百度地图的API说明文档，结合实例代码，进行开发就可以了。

首先看一下百度地图的Hello World。

操作步骤：

1、建立一个HTML页面，导入百度地图API的JS

[javascript] view plain copy

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

2、在页面的body部分，插入一个地图容器

[html] view plain copy

  1. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>

3、键入以下代码，浏览该页面，一个最简单的实例就OK了。

[javascript] view plain copy

  1. <script type="text/javascript">
  2. var map = new BMap.Map("container");            // 创建Map实例
  3. var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
  4. map.centerAndZoom(point,15);                    // 初始化地图,设置中心点坐标和地图级别。
  5. </script>

主要是有几个概念，就是物体的标注，是通过经纬度来定位的，北纬多少°多少′多少″，东经多少°多少′多少″，这样就能够精确的定位。但是在从51地图迁移到百度地图的时候，遇到了一个问题就是，坐标定位不准的问题，当时也想了很多办法，比如设置一个统一的偏离值来进行坐标的矫正，但是实验后发现一个坐标准了，另一个不一定也是按照同样的规则进行偏移。后来就想百度是否提供了转换坐标系或者直接就是从其它地图系统坐标转换的接口，经过网上的一番搜索，最后发现了两种方法，经过测试发现，这两种方法实现的效果是一样的，都是把原来的GPS地位的坐标转换成了百度地图的坐标（之所以出现坐标偏移的现象，百度官方的解释是根据国家要求需要对地图数据进行加密，百度采用了某种算法，进行了二次加密，所以偏移不统一），这里分享一下具体的方法。

操作步骤：

1、在页面head部分，导入百度坐标转换接口API

[javascript] view plain copy

  1. <script type="text/javascript" src="http://dev.baidu.com/wiki/static/map/API/examples/script/convertor.js"></script>

2、在js函数里面，键入如下代码，通过回调函数获得p的坐标

[javascript] view plain copy

  1. BMap.Convertor.translate(ggPoint,2,function(p){
  2. //ggPoint是转换前的坐标，比如51地图坐标；2是转换参数，代表是51地图，0-4有效，代表不同的地图系统
  3. });

这里再附录一下http接口：http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=116.397428&y=39.90923&callback=BMap.Convertor.cbk_7594
通过x跟y的数值，返回结果坐标是通过base64加密的（读者可以自己试一试）。

附一个asp的动态读取数据库并加载到baidu Map的简单例子。

[plain] view plain copy

  1. <div id="container">
  2. <div id="leftBar" class="leftBar">
  3. <center><h4>当前在线单位<font color=red>(<%=rs_kf(0)%>)</font></h4></center>
  4. <script src="http://www.yz91.net/Map2/kefu/kf/index.asp"></script>
  5. </div>
  6. <div id="centerBar" class="centerBar">
  7. <div id="mapDiv" style="width:100%; height:100%;"></div>
  8. </div>
  9. <div id="rightBar" class="rightBar">
  10. <div>
  11. <center><h4>最新招聘信息</h4></center>
  12. <ul id="demo1" style="list-style:none;width:100%;margin-left:5px;padding:0;">
  13. <%
  14. Set conn1 = Server.CreateObject("ADODB.Connection")
  15. constr1="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True"
  16. conn1.Open constr1
  17. Dim rs_oracle,strSql_oracle
  18. strSql_oracle="select acb200,acb210,AAB004,ACB216,ACB221||‘-‘||ACB222,ACB211,ACB212,ACB213,ACB21r,AAC011,NVL(ACC034,ACC214) DY,AAE004,AAE005,aae036,substr(aae020,0,3) from v_cb2021 where substr(aae020,0,3)=‘xxx‘or substr(aae020,0,3)=‘xxx‘ or substr(aae020,0,3)=‘xxx‘ or substr(aae020,0,3)=‘xxx‘ order by aae030 desc"
  19. set rs_oracle=conn1.Execute(strSql_oracle)
  20. %>
  21. <%
  22. Do While Not rs_oracle.Eof
  23. %>
  24. <%
  25. url="http://www.yz91.net/Company/JobDeital/"& rs_oracle("ACB200")
  26. %>
  27. <li>
  28. <a href="<%=url%>" target="_blank"><font color="#0066ff"><%=rs_oracle("AAB004")%></font>   <font color=black><%=rs_oracle("ACB216")%></font></a>
  29. </li>
  30. <%
  31. rs_oracle.MoveNext
  32. Loop
  33. %>
  34. </ul>
  35. </div>
  36. <div id="demo2" style="width:0px;"></div>
  37. </div>
  38. </div>

[plain] view plain copy

    1. <script type="text/javascript">
    2. <!--全局变量start-->
    3. var map;//地图容器
    4. var circle;//圆形区域
    5. var centerMaker;//圆形中心点覆盖物
    6. var centerMakerIcon ;//圆形中心点覆盖物图片
    7. var point;//坐标原点
    8. var datas=[];//数据源数组
    9. var myIcon;//图标
    10. <!--全局变量end-->
    11. //双击后重新定位
    12. function dblClickCallBack(Epoint){
    13. delCircleOverlay();
    14. point = Epoint;
    15. addOverlay(point,$("theradius").value);
    16. addCenterMarker(point);
    17. map.setCenter(point);
    18. }
    19. //添加覆盖物
    20. function addOverlay(point,radius){
    21. circle = new BMap.Circle(point,radius,{fillColor:"#123456", strokeColor:"#FF0000", strokeWeight: 2 ,fillOpacity: 0.1, strokeOpacity: 0.3});
    22. map.addOverlay(circle);
    23. }
    24. //添加中心覆盖物
    25. function addCenterMarker(point){
    26. centerMaker = new BMap.Marker(point,{icon: centerMakerIcon});
    27. map.addOverlay(centerMaker);
    28. }
    29. //删除覆盖物
    30. function delCircleOverlay(){
    31. map.removeOverlay(circle);
    32. map.removeOverlay(centerMaker);
    33. }
    34. //通过ip获取地址
    35. function myFun(result){
    36. var cityName = result.name;
    37. //map.setCenter(cityName);
    38. point = map.getCenter();
    39. }
    40. //初始化地图
    41. function initMap(){
    42. map=new BMap.Map("mapDiv");
    43. p1=119.41372;
    44. p2=32.39425;
    45. point=new BMap.Point(p1,p2);
    46. map.centerAndZoom(point,15);
    47. map.enableScrollWheelZoom();//支持鼠标滚轮
    48. map.enableKeyboard();//支持键盘操作
    49. map.disableDoubleClickZoom();//禁用双击放大
    50. map.setDraggingCursor("crosshair");//设置拖拽地图时的鼠标指针样式
    51. var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
    52. map.addControl(new BMap.NavigationControl(opts)); //添加地图导航面板
    53. centerMakerIcon = new BMap.Icon("images/poin01.png",new BMap.Size(24, 24));
    54. myIcon = new BMap.Icon("images/centerPoi.gif",new BMap.Size(24, 24));
    55. var myCity = new BMap.LocalCity(); //ip定位
    56. myCity.get(myFun);
    57. map.centerAndZoom(point,15);
    58. delCircleOverlay();
    59. addOverlay(point,1000);//初始化半径为1千米的圆
    60. addCenterMarker(point);//添加圆心中央的图片
    61. initData();//初始化地图数据
    62. map.addEventListener("dblclick",function(e){
    63. dblClickCallBack(e.point);
    64. });
    65. $("theradius").onchange=function(){
    66. dblClickCallBack(point);
    67. $("spanRadius").innerHTML=$("theradius").value/1000;
    68. }
    69. }
    70. function initData(){
    71. <%
    72. Dim conn,strConn
    73. Set conn=Server.CreateObject("ADODB.Connection")
    74. strConn="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True"
    75. conn.Open strConn
    76. Dim rs,strSql
    77. strSql="select * from V_MAPZP where 1=1"
    78. if(request("AAB301")<>"") then
    79. p1=Split(trim(request("AAB301")),",")(0)
    80. p2=Split(trim(request("AAB301")),",")(1)
    81. qy=Split(trim(request("AAB301")),",")(2)
    82. strSql=strSql+" and ACB200 like "+"‘%"&qy&"%‘"
    83. end if
    84. if(request("ZPGW")<>"") then
    85. gw=trim(request("ZPGW"))
    86. strSql=strSql+" and ZPGW like "+"‘%"&gw&"%‘"
    87. end if
    88. set rs=conn.Execute(strSql)
    89. %>
    90. var p1="<%=p1%>";
    91. var p2="<%=p2%>";
    92. var point;
    93. if(p1==0&&p2==0){
    94. point=new BMap.Point(119.41372,32.39425);
    95. }else{
    96. point=new BMap.Point(p1/100000,p2/100000);
    97. }
    98. //map.centerAndZoom(point,15);
    99. //delCircleOverlay();
    100. //addOverlay(point,1000);//初始化半径为1千米的圆
    101. //addCenterMarker(point);//添加圆心中央的图片
    102. var myCity = new BMap.LocalCity(); //ip定位
    103. myCity.get(myFun);
    104. map.centerAndZoom(point,15);
    105. delCircleOverlay();
    106. addOverlay(point,1000);//初始化半径为1千米的圆
    107. addCenterMarker(point);//添加圆心中央的图片
    108. <%
    109. i=0
    110. Do While Not rs.Eof
    111. %>
    112. var ggPoint= new BMap.Point(<%=rs("LNG")%>/100000,<%=rs("LAT")%>/100000);
    113. BMap.Convertor.translate(ggPoint,2,function(p){
    114. var marker = new BMap.Marker(p,{icon: myIcon});
    115. map.addOverlay(marker);
    116. marker.setLabel(new BMap.Label("<%=rs("AAB004")%>",{offset:new BMap.Size(25,2)}));
    117. var opts = {
    118. width : 260,     // 信息窗口宽度
    119. height: 0,     // 信息窗口高度
    120. title : "<b>企业信息</b>"  // 信息窗口标题
    121. }
    122. var html="<div align=left>名称：<%=rs("AAB004")%></div>";
    123. var html=html+"<div align=left>联系人：<%=rs("AAE004")%> 电话：<%=rs("AAE005")%></div>";
    124. var html=html+"<div align=left>地址：<%=rs("AAE006")%></div>";
    125. var html=html+"<div align=center>";
    126. var html=html+"<a class=ORG href=http://www.www.com"+<%=right(rs("ACB200"),14)%>+" target=_blank>招聘信息</a></div>";
    127. var infoWindows = new BMap.InfoWindow(html, opts);  // 创建信息窗口对象
    128. marker.addEventListener("click", function(){
    129. this.openInfoWindow(infoWindows);
    130. });
    131. });
    132. <%
    133. i= i + 1
    134. rs.MoveNext
    135. Loop
    136. %>
    137. }
时间： 2024-10-01 06:24:15

百度地图LBS应用开发代码的相关文章

分享：百度地图Android SDK开发指南

最新的百度地图(v3.2)下载包中居然没有开发指南,自己整理了一下网页版的百度地图Android SDK开发指南,分享给和自己一样需要Demo的学生党.下载链接: http://pan.baidu.com/s/1jGqYF5c 密码: wpf9.

使用百度地图LBS创建自定义标注

<body> <div id="allmap"></div> <div class="sel_container" id="getCurrentPosition"> <strong >定位中...</strong> </div> <div id="r-result"></div> <script type=&quo

浅谈百度地图的简单开发之结合方向传感器实现定位功能（三）

  今天我们来谈下百度地图的定位功能.在此之前我已经将百度地图的基本地图大概说了下,事实上百度地图的基本功能还有非常多的内容. 感兴趣的能够到百度地图的开发人员的官网看看.今天就開始来讲下百度地图中的定位功能. 今天所讲的百度地图所涉及的内容主要有:基本定位的实现.自己定义定位图标.结合方向传感器定位,选择定位中的几种模式(罗盘模式,普通模式,尾随模式). 一.基本定位的实现: 所谓定位无非就是获取到一个地方所处地球的经纬度坐标.这个反映到地图中就是一个点.可是怎么去实现一个定位呢?? 首先,须

百度地图二次开发Demo

单点标注:电子显示对应位置的图片,信息框 多点标注(批量点标注): 多点连线(基于多个点形成路径): 若须要Demo源码:请给我发邮箱 [email protected] 转载请注明小刘

百度地图 JavaScript API极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发者细分成普通web开发者和移动web开发者.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义.     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查询线路等. 特点: 较同时兼容PC和手机浏览器的JavaScript API大众版而言,该版更适配移动设备,体积更小,加载地图速度更快,更省流

百度地图 JavaScript API 极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义. 尊重劳动成功请保留原文地址:http://blog.csdn.net/lbsnews/article/details/29368879     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查

基于MFC与第三方类CWebPage的百度地图API开发范例

在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地图坐标标注为范例讲解百度地图API开发 1.新建一个工厂MFC工程取名为GeoDemo 2.选择为基于对话框的工程 3.创建成功如下 4.简单调整页面布局 5.在界面插入一个浏览器控件 6.插入之后的效果 7.先运行一下看看 8.接下来我们写一个简单的html页面,代码大概如下 其中也包括一个jav

最全面的百度地图JavaScript离线版开发

项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标.速度.转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置.作业点不一定都有网络,所以要求离线开发. 此过程主要有三个技术点: 1. 如何获取离线的API 2. 如何获取离线瓦片图 3. 如何在离线状态下将WGS坐标转换成百度地图坐标 解决问题过程: 1. 既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码. 这里可以参考:http:/

百度地图API开发一——仿照现有测距实现测量面积功能

  最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包--BMapLib.DistanceTool,效果如下: 这个效果体验很好:测量面积也给出了开源javascript包--BMapLib.DrawingManger,如下: 但这个效果和体验就很差了.客户希望测量面积能实现和测距一样的效果体验(鼠标在移动绘制过程中实时显示绘制面积,且样式效果要一样),经过一番折腾,修改了百度测距的javascript包,终于搞定.先上效果