做软件工程大作业的时候需要使用到baidu地图的API。这里将调用百度地图API的过程说明一下。其实大部分是参照百度API的实例说明做了。只做了一些小小的改动。因为个人对javascript非常不熟。只能一边写代码一边上网查找。为了使地图显示效果达到和follow5显示的效果一致，我自己写了一个javascript函数show()。估计这个就是此处的重点吧。
aspx页面
html代码唯一要注意的就是
<div style="width:797px;height:597px;border:1px solid gray;font-size:12px" id="container"></div><!--地图-->
因为这个是地图显示的div。注意的是id必须和下文javascript代码中的id保持一致。
<div style="height:auto; width:1440px;">
<div style=" background-color:#CCC; height:600px; float:left; margin:10px auto auto 40px; width:800px; border:solid 3px #CCC">
<div style="width:797px;height:597px;border:1px solid gray;font-size:12px" id="container"></div><!--地图-->
</div>
<div style="width:500px; height:550px; float:left; margin:auto auto auto 5px;">
<div style="height:30px; width:450px; padding-bottom:0px;"></div>
<div style="width:442px;Z-INDEX:1;height:560px;OVERFLOW:auto;">
<table cellpadding="5px" cellspacing="20px" style="font:'微软雅黑'; color:#FFF;">
<asp:Literal ID="ltrShow" runat="server"></asp:Literal><!--右框显示数据-->
</table>
</div>
<div style="height:30px; width:450px; padding-top:0px;"></div>
</div>
</div>
JS部分（放在aspx页面底部即可）
当然还需要在aspx页面的head里面加入一段
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
这个表示将baidu地图提供的api文件包涵进来。不然下面的javascript代码是无法执行的。
var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});
表示新建一个地图对象。第一个参数为你显示的div的id。第二个参数为地图类型，BMAP_PERSPECTIVE_MAP表示的是3D模式。
var point = new BMap.Point(113.403, 23.070);
设置地图中心坐标。113.403, 23.070 是广州大学城的坐标。可以自己设置。
map.setCurrentCity("广州");
设置地图显示的城市 此项是3D模式地图必须设置的。
map.centerAndZoom(point,18);
设置中心点级默认的地图缩放大小。缩放范围为1-19.。。越大表示越精细，比例尺越大。
map.enableScrollWheelZoom(true);
设置地图是否可以缩放。这里设置可以缩放
show（i）函数是可以将窗口跳动显示的核心。当然我只是依葫芦画瓢自己写的。setTimeout("函数",时间)表示每隔固定的时间调用函数一次。所以这里会一直每隔5秒就会调用一次show()函数。因为后台数据传送过来的是30条数据，当显示完数据的时候需要重头开始。将i重新设置为0.其实我觉得用i%30更加优化。
<script type="text/javascript">
var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP});
var point = new BMap.Point(113.403, 23.070);
map.setCurrentCity("广州"); // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(point,18);
map.enableScrollWheelZoom(true);
var opts = {
width : 300, // 信息窗口宽度
}
var BASEDATA = <%=jsData %>
function show(i){
var infoWindow = new BMap.InfoWindow(BASEDATA[i].t,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, new BMap.Point(BASEDATA[i].j,BASEDATA[i].w)); // 打开信息窗口
i++;
if(i>=BASEDATA.length)
i=0;
timer = setTimeout("show("+i+")", 5000);
}
show(0);
</script>
cs后台代码
因为没有调用数据库，所以将循环显示一段数据。只改变经纬度的位置，数据就不保持变化了。
ltrShow是literal控件。在地图左侧显示所有内容。
jsData是一个全局变量，目的是为了将后台的数据传递给js代码中的BASEDATA变量。
public string jsData = "";
protected void Page_Load(object sender, EventArgs e)
{
ShowData();
}
//显示数据
//显示数据
void ShowData()
{
int count = 30;
ltrShow.Text = "";
jsData = "[";//传递给js数据的变量
for (int i = 0; i < count; i++)
{
ltrShow.Text += "<tr>";
ltrShow.Text += "<td class='style3'><a href='http://weibo.com/rondsny'><img src='http://tp1.sinaimg.cn/1719298984/50/5620017623/1'>";
ltrShow.Text += "</a><br/><center>Ron_N";
ltrShow.Text += "</center></td><td class=\"style2\">你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/";
ltrShow.Text += "</td></tr>";
string jsContent = "";
sContent += "<img style='float:right;margin:4px' id='imgDemo' src='http://ww1.sinaimg.cn/bmiddle/667a6ba8gw1dohjaa085zj.jpg' width='139' title=''/>";
jsContent += "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>你的微笑在12月略显单薄/寒冬并未真正到来/午后的阳光温暖而明亮/</p>";
jsContent += "</div>";
jsData += "{t:\"" + jsContent + "\",j:\"" + 113.403+i/10 + "\",w:\"" + 23.070+i/10 + "\"},";
}
jsData += "]";//传递给js数据的变量
}
}
以上就是调用和修改的过程。个人涉及的只是一点牛毛而已。主要为了完成作业。
有什么说的不好或者不清楚的地方，欢迎各位指正。
本文转自 Ron Ngai 博客园博客，原文链接： http://www.cnblogs.com/rond/archive/2011/12/29/2306024.html ，如需转载请自行联系原作者
