首页 » 技术分享 » 百度地图和51地图API应用开发

百度地图和51地图API应用开发

　
评论关闭　892次浏览

最近因为工作需要，领导要我将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").ο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
	%>
}

转载自原文链接, 如需删除请联系管理员。

原文链接：百度地图和51地图API应用开发，转载请注明来源！

赞 0