百度地图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
操作步骤：
1、在页面head部分，导入百度坐标转换接口API
通过x跟y的数值，返回结果坐标是通过base64加密的（读者可以自己试一试）。
附一个asp的动态读取数据库并加载到baidu Map的简单例子。
<div id="container"> <div id="leftBar" class="leftBar"> <center><h4>当前在线单位<font color=red>(<%=rs_kf(0)%>)</font></h4></center> <script src="http://www.yz91.net/Map2/kefu/kf/index.asp"></script> </div> <div id="centerBar" class="centerBar"> <div id="mapDiv" style="width:100%; height:100%;"></div> </div> <div id="rightBar" class="rightBar"> <div> <center><h4>最新招聘信息</h4></center> <ul id="demo1" style="list-style:none;width:100%;margin-left:5px;padding:0;"> <% Set conn1 = Server.CreateObject("ADODB.Connection") constr1="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True" conn1.Open constr1 Dim rs_oracle,strSql_oracle 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" set rs_oracle=conn1.Execute(strSql_oracle) %> <% Do While Not rs_oracle.Eof %> <% url="http://www.yz91.net/Company/JobDeital/"& rs_oracle("ACB200") %> <li> <a href="<%=url%>" target="_blank"><font color="#0066ff"><%=rs_oracle("AAB004")%></font> <font color=black><%=rs_oracle("ACB216")%></font></a> </li> <% rs_oracle.MoveNext Loop %> </ul> </div> <div id="demo2" style="width:0px;"></div> </div> </div>
js部分：
<script type="text/javascript"> <!--全局变量start--> var map;//地图容器 var circle;//圆形区域 var centerMaker;//圆形中心点覆盖物 var centerMakerIcon ;//圆形中心点覆盖物图片 var point;//坐标原点 var datas=[];//数据源数组 var myIcon;//图标 <!--全局变量end--> //双击后重新定位 function dblClickCallBack(Epoint){ delCircleOverlay(); point = Epoint; addOverlay(point,$("theradius").value); addCenterMarker(point); map.setCenter(point); } //添加覆盖物 function addOverlay(point,radius){ circle = new BMap.Circle(point,radius,{fillColor:"#123456", strokeColor:"#FF0000", strokeWeight: 2 ,fillOpacity: 0.1, strokeOpacity: 0.3}); map.addOverlay(circle); } //添加中心覆盖物 function addCenterMarker(point){ centerMaker = new BMap.Marker(point,{icon: centerMakerIcon}); map.addOverlay(centerMaker); } //删除覆盖物 function delCircleOverlay(){ map.removeOverlay(circle); map.removeOverlay(centerMaker); } //通过ip获取地址 function myFun(result){ var cityName = result.name; //map.setCenter(cityName); point = map.getCenter(); } //初始化地图 function initMap(){ map=new BMap.Map("mapDiv"); p1=119.41372; p2=32.39425; point=new BMap.Point(p1,p2); map.centerAndZoom(point,15); map.enableScrollWheelZoom();//支持鼠标滚轮 map.enableKeyboard();//支持键盘操作 map.disableDoubleClickZoom();//禁用双击放大 map.setDraggingCursor("crosshair");//设置拖拽地图时的鼠标指针样式 var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)}; map.addControl(new BMap.NavigationControl(opts)); //添加地图导航面板 centerMakerIcon = new BMap.Icon("images/poin01.png",new BMap.Size(24, 24)); myIcon = new BMap.Icon("images/centerPoi.gif",new BMap.Size(24, 24)); var myCity = new BMap.LocalCity(); //ip定位 myCity.get(myFun); map.centerAndZoom(point,15); delCircleOverlay(); addOverlay(point,1000);//初始化半径为1千米的圆 addCenterMarker(point);//添加圆心中央的图片 initData();//初始化地图数据 map.addEventListener("dblclick",function(e){ dblClickCallBack(e.point); }); $("theradius").οnchange=function(){ dblClickCallBack(point); $("spanRadius").innerHTML=$("theradius").value/1000; } } function initData(){ <% Dim conn,strConn Set conn=Server.CreateObject("ADODB.Connection") strConn="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True" conn.Open strConn Dim rs,strSql strSql="select * from V_MAPZP where 1=1" if(request("AAB301")<>"") then p1=Split(trim(request("AAB301")),",")(0) p2=Split(trim(request("AAB301")),",")(1) qy=Split(trim(request("AAB301")),",")(2) strSql=strSql+" and ACB200 like "+"'%"&qy&"%'" end if if(request("ZPGW")<>"") then gw=trim(request("ZPGW")) strSql=strSql+" and ZPGW like "+"'%"&gw&"%'" end if set rs=conn.Execute(strSql) %> var p1="<%=p1%>"; var p2="<%=p2%>"; var point; if(p1==0&&p2==0){ point=new BMap.Point(119.41372,32.39425); }else{ point=new BMap.Point(p1/100000,p2/100000); } //map.centerAndZoom(point,15); //delCircleOverlay(); //addOverlay(point,1000);//初始化半径为1千米的圆 //addCenterMarker(point);//添加圆心中央的图片 var myCity = new BMap.LocalCity(); //ip定位 myCity.get(myFun); map.centerAndZoom(point,15); delCircleOverlay(); addOverlay(point,1000);//初始化半径为1千米的圆 addCenterMarker(point);//添加圆心中央的图片 <% i=0 Do While Not rs.Eof %> var ggPoint= new BMap.Point(<%=rs("LNG")%>/100000,<%=rs("LAT")%>/100000); BMap.Convertor.translate(ggPoint,2,function(p){ var marker = new BMap.Marker(p,{icon: myIcon}); map.addOverlay(marker); marker.setLabel(new BMap.Label("<%=rs("AAB004")%>",{offset:new BMap.Size(25,2)})); var opts = { width : 260, // 信息窗口宽度 height: 0, // 信息窗口高度 title : "<b>企业信息</b>" // 信息窗口标题 } var html="<div align=left>名称：<%=rs("AAB004")%></div>"; var html=html+"<div align=left>联系人：<%=rs("AAE004")%> 电话：<%=rs("AAE005")%></div>"; var html=html+"<div align=left>地址：<%=rs("AAE006")%></div>"; var html=html+"<div align=center>"; var html=html+"<a class=ORG href=http://www.www.com"+<%=right(rs("ACB200"),14)%>+" target=_blank>招聘信息</a></div>"; var infoWindows = new BMap.InfoWindow(html, opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ this.openInfoWindow(infoWindows); }); }); <% i= i + 1 rs.MoveNext Loop %> }
