百度地图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 plaincopy

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

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

[html] view plaincopy

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

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

[javascript] view plaincopy

<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

[javascript] view plaincopy

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

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

[javascript] view plaincopy

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的简单例子。

[plain] view plaincopy

<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>

[plain] view plaincopy

<script type="text/javascript">
var map;//地图容器
var circle;//圆形区域
var centerMaker;//圆形中心点覆盖物
var centerMakerIcon ;//圆形中心点覆盖物图片
var point;//坐标原点
var datas=[];//数据源数组
var myIcon;//图标
//双击后重新定位
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
%>
}

转载于:https://www.cnblogs.com/guwei4037/p/5588628.html

百度地图LBS应用开发代码相关推荐

浅谈百度地图的简单开发最后收官之实现导航功能（五）
这篇是高仿百度地图的最后一篇了,今天主要来实现百度地图的导航的功能,并且该导航还自带语音播报功能,然后最后对整个百度地图开发过程遇到的问题进行一些列举,并给出一些解决的办法,可能总结的不是很齐全,希望 ...
浅谈百度地图的简单开发再续前缘之公交,地铁路线检索查询(六)
关于百度地图的简单开发前段时间,写过一个小系列的博客关于百度地图的基本地图,定位,全景,导航等功能做了简单的介绍.从今天开始又将准备一期有关百度地图的POI检索的等一列查询功能,如城市检索,周边检索, ...
百度地图对应天气城市代码
由于项目用到天气查询,给的接口只能传入一个城市代码定位使用百度地图,因为百度地图给的城市代码不是我想要的天气城市代码,所以自己组装了一个json自己使用,现在记录下来,希望可以帮助到你们 packa ...
地图标注源码 php,jQuery百度地图自定义标注信息代码
jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码. new BaiduMap({ id: "container2", title: ...
iOS百度地图的相关开发(一)
2019独角兽企业重金招聘Python工程师标准>>> 我是最近接触的百度读图开发,百度地图的相关sdk api开发写的很简单,有很多都是写的不是很详细,但是如果我们想深究就会遇到很 ...
百度地图LBS云存储自定义poi热点
无疑在地图扩展开发上面百度地图是个不错的选择,但是鉴于牛逼的百度api技术论坛和惊人的问题回复速度真是想死的心都有.所有在这里把已经研究出来的东西写出来,希望后人能绕过百度这个大坑.这里只说明代码实现 ...
百度地图离线API开发（真正的离线开发）
公司现在做的一个项目本来用的是google离线地图,但是发现谷歌的地图数据很久没更新数据了,中国的城市发展这么快,好多地方地图和现实都对不上了.发现百度地图数据更新挺快的(呵呵,毕竟是国产的吗),最后 ...
浅谈百度地图的简单开发之引入基本地图以及修改地图样式（一）
今天,想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP),基本实现了百度地图的几大核心功能,百度地图中的基本地图,百度地图的定位,百度地图的全景显示,百度 ...
百度地图api离线开发（示例源代码）
相关教程: 1.如何搭建WEB离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据) 3.离线地图二次开发接口(离 ...

百度地图LBS应用开发代码

百度地图LBS应用开发代码相关推荐

最新文章

热门文章