最近因为工作需要,领导要我将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 constr1Dim rs_oracle,strSql_oraclestrSql_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.MoveNextLoop%></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").οnchange=function(){dblClickCallBack(point);$("spanRadius").innerHTML=$("theradius").value/1000; }
}function initData(){<%Dim conn,strConnSet conn=Server.CreateObject("ADODB.Connection")strConn="Provider=MSDAORA.1;Password=xxx;User ID=yyy;Data Source=orcl;Persist Security Info=True"conn.Open strConnDim rs,strSqlstrSql="select * from V_MAPZP where 1=1"if(request("AAB301")<>"") thenp1=Split(trim(request("AAB301")),",")(0)p2=Split(trim(request("AAB301")),",")(1)qy=Split(trim(request("AAB301")),",")(2)strSql=strSql+" and ACB200 like "+"'%"&qy&"%'"end ifif(request("ZPGW")<>"") thengw=trim(request("ZPGW"))strSql=strSql+" and ZPGW like "+"'%"&gw&"%'"end ifset 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=0Do 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 + 1rs.MoveNextLoop%>
}

百度地图和51地图API应用开发相关推荐

  1. 百度地图api离线开发(示例源代码)

    相关教程:               1.如何搭建WEB离线地图开发环境               2.下载离线地图数据(金字塔瓦片数据)               3.离线地图二次开发接口(离 ...

  2. 高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...

    在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...

  3. arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)

    本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...

  4. 基于ArcGIS API for JavaScript加载百度各种类型切片地图

    文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...

  5. 通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息

    通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息 更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...

  6. 百度、高德离线地图SDK开发工具,局域网内离线地图开发环境

       相关下载:For Linux版本下载 快速搭建离线地图开发环境     局域网地图服务   离线地图数据服务  二次开发 一.软件介绍     BIGEMAP离线地图服务器,提供一站式搭建离线/ ...

  7. 浅谈百度地图的简单开发之引入基本地图以及修改地图样式(一)

    今天,想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP),基本实现了百度地图的几大核心功能,百度地图中的基本地图,百度地图的定位,百度地图的全景显示,百度 ...

  8. 安卓开发笔记(十二)—— 基于百度地图SDK完成地图中心定位,marker转向,动态定位

    中山大学数据科学与计算机学院本科生实验报告 (2018年秋季学期) 项目源码:Github传送门 第十七周任务 一.实验题目 地图 第十七周实验目的 接入百度地图API 掌握少量的百度地图API接口 ...

  9. 高德地图API的开发与代码编写

    高德地图API的开发与代码编写 高德地图底层源码 /** 高德autonavi 地图API Define:begin */ var AutoNaviMap = function(mapOption){ ...

最新文章

  1. 网络编程学习笔记(RES_USE_INET6解析器选项)
  2. codeforces773 D. Perishable Roads(思维+最短路)
  3. __va_rounded_size
  4. ncurses初始化函数:raw(),cbreak(),echo(),noecho(),keypad(),halfdelay()
  5. idea创建maven工程_maven创建父子工程 springboot自动配置
  6. Java教程_软件开发基础
  7. PHP 实现-多线程编程
  8. 计算机在工程制图上的应用,浅析计算机软件在工程制图中的应用
  9. java quartz配置_Quartz 定时任务(Quartz 的配置文件)
  10. MyBatis出现参数索引越界
  11. AD快捷键设置(自定义)
  12. js按钮触发网页提醒_js实现按钮点击事件 在页面上点击函数,查看执行效果
  13. THE TWENTY-EIGHTH DAY
  14. cents7之我的ip问题
  15. Android Hierarchy Viewer
  16. 机器学习算法:根据幸福感问卷调查做预测
  17. 语音计算机音乐学猫叫,“杨钰莹学猫叫”上热搜,坤音四子自带流量……山东卫视春晚喜提全国收视第一...
  18. linux复制与粘贴操作的快捷键
  19. 入侵检测技术综述(比较全)
  20. Java服务端集成环信IM

热门文章

  1. 电脑硬盘分区太多?如何合并分区?
  2. 看懂英文数据手册、搭建电路
  3. 谈 Scratch 版“植物大战僵尸”
  4. 不一样的课程表,不一样的Excle--用Excle进行设计(12):网状结构
  5. (零基础)入门python学习四步骤,附上Python全栈学习路线大刚!
  6. 超详细!Jmeter性能测试(一)
  7. 如何通过按钮触发事件由一个jsp页面转到另一个jsp页面
  8. Web前端面试常用技巧
  9. java输出hello word,新手求教如何输出helloword
  10. 知识图谱从入门到应用——知识图谱的应用