今天思索一个问题,想着怎么用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