MFC与第三方类库CWebPage开发javascript函数调用示例

2023-05-16

今天思索一个问题，想着怎么用c++调用百度地图，结果网上有一篇文章介绍了如何使用MFC项目结合CWebPage来调用百度地图。看了整篇博客，思路很清晰，但是看下来，其实就是利用了MFC调用html页面的javascript函数来达到调用百度地图的目的。本质上还是web应用的地图。不是真正意义上的从无到有加载百度地图。自己通篇搞下来，也算是积累了一些经验。我认为这个是一个MFC调用html页面的javascript函数的应用。下面介绍如何一步一步实现MFC调用html页面的javascript函数。

这里准备工作：

你需要安装VC++6.0。
会一点javascript书写技巧。
知道如何使用百度地图api。
知道如何使用MFC。

接下来进入正题，先创建一个html页面，可以是外部的，也可以是项目里面的，我这里因为使用了百度地图，而且它需要开启一个http服务，否则无法使用百度地图的lbs服务。

准备html页面

index.htm

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>map</title>
		<style>
			html,body{height:100%;width:100%;padding:0;margin:0;}
			#root{height:100%;}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YcP5EukTHUoFR3oObxdfBHTfA3EUgHET"></script>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/javascript">
			window.onload = function(){
				var map = new BMap.Map("root");
				map.centerAndZoom(new BMap.Point(116.404,39.915),15)
				map.enableScrollWheelZoom()
			}
			
			function getMessage(latitude,longitude){
				return ("纬度:"+latitude+",经度:"+longitude);
			}
		</script>
	</body>
</html>

这个页面加载了百度地图，我们另外编写了一个getMessage()的函数，其实就是一个测试回调的函数，我们通过MFC结合CWebPage类可以调用就行了，这里的功能很简单，就是返回一个拼接的字符串。

进入html文件目录下的命令行，通过python命令开启一个http服务，这样，在浏览器中我们可以通过输入url的方式来访问页面。

浏览器访问页面：

以上是准备工作，下面进入MFC项目的创建以及加载页面，调用页面的javascript函数编码工作。

创建MFC工程

创建工程，第一步选择MFC AppWizard [exe]，工程名称随便定义，我这里是GeoDemo

第二步，选择基于对话框的工程：

因为后面需要在对话框中拉出一个浏览器控件，用来加载html页面。创建成功就是这个样子：

接下来，我们需要修改界面。

接着在界面左侧增加一个浏览器控件，用来加载html页面，在界面右键，选择Insert ActiveX Control：

选择Microsoft Web Browser这个控件，点击OK。

在页面尽量拉宽一点，最后长这个样子：

运行之后，长这样子：

下面开始设置变量，增加处理函数，加载页面，调用回调函数。具体做法是，在界面右键，选择ClassWizard，选择第二个tab页面，对浏览器控件增加一个变量，会有警告：

我们根据提示，需要加入CWebBrowser2的头文件和源文件，直接点击“OK”按钮：

接着，设置变量m_myweb：

我们对经度纬度编辑框也设置变量：

为界面的“调用函数”按钮控件增加响应，在按钮控件上右键选择Events，最后对“单击”事件添加处理函数：

接下来，就是编写代码的时候了，前面主要是拖拽控件，以及设置变量，设置处理句柄。我们在编写代码之前，需要将第三方的CWebPage类库的头文件和源码文件加入到项目中，我这里直接给出来。有两个文件：WebPage.h与WebPage.cpp。

我们先将他们放在项目路径下：

接着在菜单栏Project->Add To Project->Files选择项目路径下的两个文件：WebPage.h和WebPage.cpp，这两个文件在文末也会给出地址，不用担心上哪下载。

我们在源文件GeoDemoDlg.cpp文件中编写我们将要添加的代码，我们需要引入WebPage.h。

#include "WebPage.h"

接着在OnInitDialog()方法中的最后return语句之前，增加一句代码：

m_myweb.Navigate("http://127.0.0.1:8000/index.htm",NULL,NULL,NULL,NULL);

接着在我们的“回调函数 ”按钮处理函数这里（我这里是OnCallback），书写我们通过CWebPage类库调用javascript函数的代码：

void CGeoDemoDlg::OnCallback() 
{
    // TODO: Add your control notification handler code here
    UpdateData(true);
    CWebPage webpage;
    webpage.SetDocument(m_myweb.GetDocument());
    const CString functionName("getMessage");
    CComVariant varResult;
    webpage.CallJScript(functionName,m_latitude,m_longitude,&varResult);
    //varResult.ChangeType(VT_BSTR);
    CString msg;
    msg = varResult.bstrVal;
    MessageBox(msg);
}

解释一下，我这里是根据输入的经纬度，传给getMessage(m_latitude,m_longitude)函数，然后getMessage函数会返回拼接的字符串给MFC，这里再将结果通过MessageBox显示出来。达到了测试回调函数的目的。

第一次编译运行，加载页面会很慢，需要等待一段时间对话框中的页面才加载出来。

以上代码演示就完成了，最后给出代码的github地址： https://github.com/buejee/GeoDemo

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)