其實(shí)大部分是參照百度API的實(shí)例說(shuō)明做了。只做了一些小小的改動(dòng)。因?yàn)閭€(gè)人對(duì)javascript非常不熟。只能一邊寫(xiě)代碼一邊上網(wǎng)查找。為了使地圖顯示效果達(dá)到和follow5顯示的效果一致，我自己寫(xiě)了一個(gè)javascript函數(shù)show()。估計(jì)這個(gè)就是此處的重點(diǎn)吧。

aspx頁(yè)面

html代碼唯一要注意的就是

<div style="width:797px;height:597px;border:1px solid gray;font-size:12px" id="container"></div><!--地圖--> 

因?yàn)檫@個(gè)是地圖顯示的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><!--右框顯示數(shù)據(jù)--> 
                     
                    </table> 
                </div> 
                <div style="height:30px; width:450px; padding-top:0px;"></div> 
            </div> 
        </div> 

JS部分(放在aspx頁(yè)面底部即可)

當(dāng)然還需要在aspx頁(yè)面的head里面加入一段

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

這個(gè)表示將baidu地圖提供的api文件包涵進(jìn)來(lái)。不然下面的javascript代碼是無(wú)法執(zhí)行的。

var map = new BMap.Map("container", {mapType:BMAP_PERSPECTIVE_MAP}); 

表示新建一個(gè)地圖對(duì)象。第一個(gè)參數(shù)為你顯示的div的id。第二個(gè)參數(shù)為地圖類型，BMAP_PERSPECTIVE_MAP表示的是3D模式。

var point = new BMap.Point(113.403, 23.070); 

設(shè)置地圖中心坐標(biāo)。113.403, 23.070 是廣州大學(xué)城的坐標(biāo)?？梢宰约涸O(shè)置。

map.setCurrentCity("廣州");   

設(shè)置地圖顯示的城市 此項(xiàng)是3D模式地圖必須設(shè)置的。

map.centerAndZoom(point,18); 

設(shè)置中心點(diǎn)級(jí)默認(rèn)的地圖縮放大小?？s放范圍為1-19.。。越大表示越精細(xì)，比例尺越大。

map.enableScrollWheelZoom(true); 

設(shè)置地圖是否可以縮放。這里設(shè)置可以縮放

show(i)函數(shù)是可以將窗口跳動(dòng)顯示的核心。當(dāng)然我只是依葫蘆畫(huà)瓢自己寫(xiě)的。setTimeout("函數(shù)",時(shí)間)表示每隔固定的時(shí)間調(diào)用函數(shù)一次。所以這里會(huì)一直每隔5秒就會(huì)調(diào)用一次show()函數(shù)。因?yàn)楹笈_(tái)數(shù)據(jù)傳送過(guò)來(lái)的是30條數(shù)據(jù)，當(dāng)顯示完數(shù)據(jù)的時(shí)候需要重頭開(kāi)始。將i重新設(shè)置為0.其實(shí)我覺(jué)得用i%30更加優(yōu)化。

<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("廣州");          // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的  
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);  // 創(chuàng)建信息窗口對(duì)象  
    map.openInfoWindow(infoWindow, new BMap.Point(BASEDATA[i].j,BASEDATA[i].w));      // 打開(kāi)信息窗口  
    i++;  
    if(i>=BASEDATA.length)  
    i=0;  
    timer = setTimeout("show("+i+")", 5000);  
}  
show(0);  
</script> 

cs后臺(tái)代碼

因?yàn)闆](méi)有調(diào)用數(shù)據(jù)庫(kù)，所以將循環(huán)顯示一段數(shù)據(jù)。只改變經(jīng)緯度的位置，數(shù)據(jù)就不保持變化了。ltrShow是literal控件。在地圖左側(cè)顯示所有內(nèi)容。jsData是一個(gè)全局變量，目的是為了將后臺(tái)的數(shù)據(jù)傳遞給js代碼中的BASEDATA變量。

public string jsData = "";  
   protected void Page_Load(object sender, EventArgs e)  
   {  
       ShowData();  
   }  
   //顯示數(shù)據(jù)  
   //顯示數(shù)據(jù)  
   void ShowData()  
   {  
       int count = 30;  
           ltrShow.Text = "";  
           jsData = "[";//傳遞給js數(shù)據(jù)的變量  
           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月略顯單薄/寒冬并未真正到來(lái)/午后的陽(yáng)光溫暖而明亮/";  
               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月略顯單薄/寒冬并未真正到來(lái)/午后的陽(yáng)光溫暖而明亮/</p>";  
               jsContent += "</div>";  
               jsData += "{t:\"" + jsContent + "\",j:\"" + 113.403+i/10 + "\",w:\"" + 23.070+i/10 + "\"},";  
           }  
           jsData += "]";//傳遞給js數(shù)據(jù)的變量  
       }  
   } 

以上就是調(diào)用和修改的過(guò)程。

原文：http://www.cnblogs.com/rond/archive/2011/12/29/2306024.html

【編輯推薦】

1. 百度地圖API之如何制作公交導(dǎo)航
2. 百度地圖API開(kāi)發(fā)指南
3. 百度地圖API如何批量轉(zhuǎn)換為百度經(jīng)緯度
4. 百度地圖API如何給自定義覆蓋物添加事件
5. 詳解百度地圖API之自定義地圖類型