百度地图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
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
2、在页面的body部分,插入一个地图容器
- <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
3、键入以下代码,浏览该页面,一个最简单的实例就OK了。
- <script type="text/javascript">
- var map = new BMap.Map("container"); // 创建Map实例
- var point = new BMap.Point(116.404, 39.915); // 创建点坐标
- map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
- </script>
主要是有几个概念,就是物体的标注,是通过经纬度来定位的,北纬多少°多少′多少″,东经多少°多少′多少″,这样就能够精确的定位。但是在从51地图迁移到百度地图的时候,遇到了一个问题就是,坐标定位不准的问题,当时也想了很多办法,比如设置一个统一的偏离值来进行坐标的矫正,但是实验后发现一个坐标准了,另一个不一定也是按照同样的规则进行偏移。后来就想百度是否提供了转换坐标系或者直接就是从其它地图系统坐标转换的接口,经过网上的一番搜索,最后发现了两种方法,经过测试发现,这两种方法实现的效果是一样的,都是把原来的GPS地位的坐标转换成了百度地图的坐标(之所以出现坐标偏移的现象,百度官方的解释是根据国家要求需要对地图数据进行加密,百度采用了某种算法,进行了二次加密,所以偏移不统一),这里分享一下具体的方法。
操作步骤:
1、在页面head部分,导入百度坐标转换接口API
- <script type="text/javascript" src="http://dev.baidu.com/wiki/static/map/API/examples/script/convertor.js"></script>
2、在js函数里面,键入如下代码,通过回调函数获得p的坐标
- BMap.Convertor.translate(ggPoint,2,function(p){
- //ggPoint是转换前的坐标,比如51地图坐标;2是转换参数,代表是51地图,0-4有效,代表不同的地图系统
- });
这里再附录一下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的简单例子。
- <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>
- <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").onchange=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
- %>
- }
百度地图LBS应用开发代码的更多相关文章
- [github项目]基于百度地图二次开发实现的车辆监管(包含车辆定位、车辆图片和方向控制,电子围栏,图形绘制等功能)前端实现(不包含后端实现)
前言:基于百度地图javascript版本开发,百度地图中所用的key已承诺仅用于测试,不用于商业用途 注:本文所有代码可以到github上进行下载,github地址:http://map.eguid ...
- 使用百度地图LBS创建自定义标注
<body> <div id="allmap"></div> <div class="sel_container" i ...
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 百度地图LBS云平台读写数据操作类
最近写了个叫<行踪记录仪>的手机软件,用了百度云来记录每个用户的最近位置,以便各用户能在地图上找到附近的人,为此写了个类来读写数据,大致如下: import java.util.Array ...
- 带有定位当前位置的百度地图web api 前端代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport& ...
- 百度地图LBS开放平台AK一直没有用
http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924;114.21892734521,29.57542 ...
- 百度地图二次开发Demo
单点标注:电子显示对应位置的图片,信息框 多点标注(批量点标注): 多点连线(基于多个点形成路径): 若须要Demo源码:请给我发邮箱 1507026255@qq.com 转载请注明小刘
- 百度地图四(Android百度地图Poi检索开发总结)
https://blog.csdn.net/wenzhi20102321/article/details/54575999
- iOS开发---集成百度地图完善版
一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...
随机推荐
- jQuery操作select option
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- HDU 5433 Xiao Ming climbing dp
Xiao Ming climbing Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://bestcoder.hdu.edu.cn/contests/ ...
- memset函数具体说明
1.void *memset(void *s,int c,size_t n)总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 c. 2.样例#include void main(){char ...
- android学习日记19--四大组件之Services(服务)
一个Android应用主要由四个基本组件组成,Android四大基本组件分别是Activity,Content Provider内容提供者,Service服务,BroadcastReceiver广播接 ...
- 五、Socket之UDP异步传输文件-实现传输中取消传送
上一篇文章四.Socket之UDP异步传输文件中,只实现了传输开始前拒绝接收文件,没有实现文件传输进行的时候取消传送,这篇文章中我们就来介绍怎样实现这个功能. 在传输过程中取消文件的传送,有很多地方要 ...
- js数组定义和获取其长度
1.只有值组成的数组,必须先定义数组对象. 定义 var arrs=new array()或 var arrs=[]; 赋值: arrs[]="he";arrs[]="c ...
- 如何把 excel 设为文本格式?
选择要设置的单元格,右键选择 --- “设置单元格格式” --- 选 “ 分类 ” 下面的 “ 文本 ” --- 确定. 修改前: 修改后:
- Android实现资料收藏
1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.ACTI ...
- SVN服务器搭建和使用(二)
上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首先打开 ...
- [转]Oracle 调用存储过程并显示结果集 Oracle.DataAccess.Client OracleDbType.RefCursor
本文转自:http://liye9801.blog.163.com/blog/static/6019703200901244448950/ 今天学习了一个Oracle中的存储过程,一开始便被如果返回结 ...