-----------------------------------------------------------------------------------------------------------------------------------------------

  最近開發MFC程式，用WebBrowser控制元件呼叫百度地圖JavaScript API來展示軌跡，後臺通過C++編寫相關邏輯程式碼。

     VC++和JavaScript之間的資料傳遞互動是一個重要的問題！

     因此，本文主要來通過案例介紹上訴兩者資料傳遞。

-----------------------------------------------------------------------------------------------------------------------------------------------

一、預備知識

Step1：在瞭解VC++與JavaScript資料互動之前，首先你要學會使用WebBrowser控制元件來呼叫百度地圖API！

MFC使用WebBrowser控制元件呼叫百度地圖JavaScript API簡單案例！ 下載地址如下：（裡面有使用說明）

Step2：MFC中使用WebBrowser.Navigate()方法呼叫本地的.htm檔案！

二、VC++傳遞資料給前端網頁

其實在“預備知識的Step1”的簡單案例中已經包含了VC++傳遞兩個變數到JavaScript的方法：即呼叫CWebPage類的CallJScript()函式。

此處，在上面的基礎上新增功能——將返回值傳遞給VC++！

實現方案如下：

1、在對話方塊或者檢視的實現檔案中，加入#include "WebPage.h"，在按鈕的響應函式中就可以呼叫JavaScript函數了，具體程式碼如下：

void CGeoDemoDlg::OnShow()
{
	// TODO: 在此新增控制元件通知處理程式程式碼

	UpdateData(TRUE);//將螢幕上控制元件中的資料交換到變數中

	CWebPage cwp;
	cwp.SetDocument(m_myweb.get_Document());
	const CString funcName("justmarkfun");//justmarkfun為前端JS函式名
	CComVariant varResult;//存放呼叫JavaScript函式返回的返回值，但此處無用

	//這裡m_JD和m_WD是與編輯框控制元件的兩個CString型別變數,傳入經度緯度值
	//這裡引數的個數要與javascript函式justmakefun函式的個數相同,而且順序要保持一致
	cwp.CallJScript(funcName,m_JD,m_WD,&varResult);//呼叫JS中的函式justmarkfun()，並傳遞兩個引數m_JD和m_WD

}
 

2、在前端htm檔案中的script標籤中定義對應的函式，具體程式碼如下：

<script type="text/javascript">

    //顯示該點
    function justmarkfun(JD, WD) {
        map.clearOverlays();//清理之前的標註
        var point=new BMap.Point(JD, WD);//建立該點
        var marker1 = new BMap.Marker(point);//建立標註
        window.map.addOverlay(marker1);//將標註新增到地圖中
        map.centerAndZoom(point, 12);//以該點為中心展示地圖
    }

</script>

三、前端網頁將值傳遞給VC++後端

1、在對話方塊或者檢視的實現檔案中，加入#include "WebPage.h"，在按鈕的響應函式中呼叫JavaScript函式，通過varResult類來獲取返回值，並做相應型別轉換的處理。具體程式碼如下：

void CGeoDemoDlg::OnClickedGetdataFromHTML()
{
	// TODO: 在此新增控制元件通知處理程式程式碼

	CWebPage WebPage;
	CComVariant varResult;//存放呼叫JavaScript函式返回的返回值
	CString szTaskGPS;//字串變數，用於記錄編輯框中的GPS

	WebPage.SetDocument(m_myweb.get_Document());
	WebPage.CallJScript("GetGPS", &varResult);//GetGPS:js函式名，用於從前端獲取經緯度的值
	szTaskGPS = (BSTR)varResult.pbstrVal;//存放經緯度返回值，從前端htm中js函式獲得;要進行型別轉換
	
	MessageBox(_T("從前臺獲取到當前的經緯度資訊為:") + szTaskGPS,_T("提示！"),MB_ICONINFORMATION);
	
	AfxExtractSubString(m_JD2,szTaskGPS,0,',');//VC中AfxExtractSubString函式用於分割字串，詳情可網上百度
	AfxExtractSubString(m_WD2,szTaskGPS,1,',');

	UpdateData(FALSE);//將變數中的資料交換到螢幕上控制元件中
}

2、在前端htm檔案中的script標籤中定義對應的函式，具體程式碼如下：

<script type="text/javascript">

    //單擊獲取點選的經緯度
    map.addEventListener("click", function (e) {
        map.clearOverlays(); //清理之前的標註
        document.getElementById("gps").value = e.point.lng + ',' + e.point.lat;
        var marker = new BMap.Marker(e.point);
        map.addOverlay(marker); //將標註新增到地圖中
    });
    //返回頁面內容中的文字編輯框gps中的值
    function GetGPS() {
        return document.getElementById("gps").value;
    }

</script>

注意：

1、上面JavaScript中的clearOverlays()、addOverlay()等函式是百度地圖API中的函式，可詳情見百度地圖API官網。

2、上訴實現不用管CWebPage類起什麼作用，直接用就行，因為CallJScript()函式是CWebPage類的成員函式。

2、如果想了解VC++與JavaScript前端資料互動的詳細內容，請搜尋有關“COM元件自動化”、“IDispatch介面”的文章。