asp.net web開發中使用JS百度地圖資訊彈出窗中顯示echarts圖

      之前在WebGIS開發中，主要是企業級開發，而面向大眾級的開發平臺，如百度地圖等卻很少。

      最近手頭上的一個專案，有一個“電子地圖”功能，由於功能需求僅僅是資訊檢視和瀏覽，所以選用了百度地圖，但是在開發中遇到一個問題，就是資訊提示視窗中，要顯示折線圖，搜尋了一大圈也沒有這樣的示例。

      後來思考了一下，由於資訊視窗中使用的是html程式碼，所以可以間接使用iframe來載入一個包含圖表資料的頁面，最終實現了功能，以下是初步的示例效果，後續還需要UI設計人員進行優化處理。

geoc.getLocation(point, function (rs) {
      var html = ["<div class='infoBoxContent'><div class='title'><strong>" + deptname + "</strong></div>"
                  , "<table cellpadding='0'cellspacing='0'>"
                   , "<tr><td width='100px'>昨日總用電：</td><td>" + yesterday + "（千瓦時）</td><td rowspan='2'><div style='text-align:center;'><img width='200' height='140' src='../../Images/map/czb.jpg'/></br><a target='_self' href='EnergySaveMain.aspx?UnitCode=" + deptid + "'>檢視</a></div></td></tr>"
                  , "<tr><td width='100px'>本月總用電：</td><td>" + lastmonth + "(千瓦時)</td></tr>"
                  , "<tr><td colspan='3'><iframe width='490px' height='200px' frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='no'   scrolling='no' src='charts.aspx'/></td></tr>"
                  "</table>"
                  , "</div>"];
      infoBox = new BMapLib.InfoBox(map, html.join(""), {
              boxStyle: { width: "500px", height: "260px" }
               , offset: new BMap.Size(0, 170)//170是調整彈出框上下距離作用
               , closeIconUrl: "../../Images/map/close.png"
               , enableAutoPan: true
               , align: INFOBOX_AT_TOP
     });
     infoBox.open(point);
});

這裡最主要的思路程式碼為：

<iframe width='490px' height='200px' frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='no'   scrolling='no' src='charts.aspx'/>

===========================================================================

如果覺得對您有幫助，微信掃一掃支援一下：