百度3D地圖API的調用以及適應過程

做軟體工程大作業的時候需要使用到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資料的變數
        }
    }

以上就是調用和修改的過程。個人涉及的只是一點牛毛而已。主要為了完成作業。

有什麼說的不好或者不清楚的地方，歡迎各位指正。