分享

MFC嵌入google map

 学海无涯GL 2017-11-20

使用平台:win7 64bit
使用环境:VS2010


前言


   之前对MFC中嵌入google map使用过,总结一下,方便以后查阅。首先MFC中可以使用CHtmlView类来实现浏览器的功能。Google Map开发有开发者接口供开发者使用,但是一般都是使用javascript来使用的。所以我们最好是借助MFC和JavaScript交互来实现Google Map的嵌入。

实现过程:


  以建一个简单的demo程序为例:

  1、建立一个html文件,并嵌入JavaScript接口。

博主也不懂JavaScript怎么编写,在网上照虎画猫写一个html如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.     "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www./1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">  
  4.   <head>  
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
  6.     <title>Google 地图 @ Robin 2015</title>  
  7.     <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"  
  8.             type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.     var map;  
  11.       
  12.     function initialize()   
  13.     {  
  14.       if (GBrowserIsCompatible())   
  15.       {  
  16.         map = new GMap2(document.getElementById("map_canvas"));  
  17.         map.setCenter(new GLatLng(30.67, 104.06), 10);  
  18.         map.addControl(new GLargeMapControl());  
  19.         map.addControl(new GMapTypeControl(true));  
  20.         var bounds = map.getBounds();  
  21.         var southWest = bounds.getSouthWest();  
  22.         var northEast = bounds.getNorthEast();  
  23.         var lngSpan = northEast.lng() - southWest.lng();  
  24.         var latSpan = northEast.lat() - southWest.lat();  
  25.         var point = new GLatLng(40.2, 120.2);  
  26.         map.addOverlay(new GMarker(point));  
  27.       }  
  28.     }  
  29.       
  30.     function SetCenter(x,y,type)  
  31.     {  
  32.         map.setCenter(new GLatLng(40.2, 120.2), type);  
  33.     }  
  34.       
  35.     </script>  
  36.   </head>  
  37.   <body onload="initialize()" onunload="GUnload()">  
  38.     <div id="map_canvas" style="position:absolute;width:100%; height:100%;"></div>  
  39.   </body>  
  40. </html>  

  2、创建一个单文档应用程序(当然,其他的也是可以的)。

     这里要注意的是:一定要让view类继承自CHtmlView类,因为CHtmlView才支持网页浏览的!


创建完成后在View类的OnInitialUpdate()中工程会默认添加一个网页浏览:
Navigate2(,,);
要让任何网页显示在界面上其实使用这个Navigate2(,,);就可以办到了。
但是要想操作网页,仅靠这个事办不到的。
Navigate2();还支持对html的导入,也就是说自己写的html界面都可以放在界面上,这里只要传一个路径就可以了。

 

  3、添加成员函数 

    在OnInitialUpdate()中来调用它。
  1. void CjsView::Init(void)  
  2. {  
  3. //读取程序的完整路径  
  4. char szCurDir[255];  
  5. memset(szCurDir, 0, sizeof(szCurDir));  
  6. DWORD length = sizeof(szCurDir);    
  7. GetModuleFileName(NULL, szCurDir, length);  
  8.   
  9.   
  10. //将应用程序名称去掉,得到当前运行程序的目录  
  11. CString app;  
  12. app.Format("%s", szCurDir);  
  13. int end = app.ReverseFind('\\');  
  14. app = app.Left(end);  
  15.   
  16.   
  17. //找到当前路径下的地图信息模板文件名  
  18. CString sPath;  
  19. sPath.Format(_T("%s\\%s"), app, "Google-earth.html");  
  20.   
  21.   
  22. Navigate2(_T(sPath),NULL,NULL);  
  23. }  

然后把编写好的html文件拷贝Debug目录(也就是生成的exe的那个目录)。运行程序,就可以看到程序界面上已经可以显示地图了。



  4、MFC与JavaScript交互

    方便起见,在应用程序上添加一个菜单项,并添加菜单响应函数。
在响应函数中添加:

  1. CString js;   
  2. float x = 40;  
  3. float y = 120;  
  4. js.Format(_T("SetCenter(%.2f,%.2f,%d);"), x, y, 15);  
  5.   
  6. //获取文档类指针  
  7. CComQIPtr<IHTMLDocument2> pDoc = (IHTMLDocument2*)GetHtmlDocument();  
  8. if (pDoc == NULL) return;  
  9.   
  10. //通过文档类指针获取HTML  
  11. CComQIPtr<IHTMLWindow2> pWin;  
  12. pDoc->get_parentWindow(&pWin);  
  13. if (pWin == NULL) return;  
  14.   
  15.   
  16. //执行JavaScript脚本  
  17. CComBSTR bstrJS = js.AllocSysString();  
  18. CComBSTR bstrLanguage = SysAllocString(L"javascript");  
  19. VARIANT varResult;  
  20. pWin->execScript(bstrJS, bstrLanguage, &varResult);  

这样就调用了html文件中的SetCenter()函数。地图就随之发生变化了。



   同样,按照上述的方式,可以再html文件中添加其他的函数对地图进行操作,然后在mfc中调用就可以达到交互的目的了。

在对话框程序同样可以实现上述的内容,使用控件web browser再适合不过了。



点我下载demo


      

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多