近期须要实验室须要将在无人机地面站中嵌入地图，在网上找了非常多资料，最终有些眉目了，

首先。做这个须要用到的知识有。MFC控件、MFC类库、JavaScript脚本语言。Google API、Google离线地图；因为google离线地图不怎么会。首先从google在线地图開始。

以下总结一下这几天搞google地图的步骤。有附图，对MFC和JS脚本语言不懂的同学实用。

在线Google 地图步骤：

（1）、建立基于对话框的MFCproject。

因为我对MFC基本不了解，所以从网上下载了个样例。可是不知道样例中那一部分是涉及google地图的部分。这个时候我仅仅能一步步的从新建project開始。建立了一个基于对话框的MFCproject，project中自己主动生成了3个类，他们是(1)\classCThird_ProjApp:publicCWinApp\(2)\
classCForth_ProjDlg:publicCDialogEx\,(3)\ classCAboutDlg:publicCDialogEx

\此3个类中我仅仅须要了解CForth_ProjDlg就能够了。由于我们接下来的操作对象是CForth_ProjDlg。

（2）、向project中加入web browser控件。

方法例如以下：工具----选择工具箱项------COM组件，microsoft browser前面的复选框勾选上。

（加入其它的active X控件也是相同的方法）。然后在界面中加入控件。调整web browser控件的大小使之能显示我们须要的google地图。如图所看到的，

（3）、为web browser控件加入变量m_map。

这样在project中就多了两个文件，当中包括classCExplorer1:publicCWnd类及事实上现。在CForth_ProjDlg类中多了一个 CExplorer1类型的 变量m_map。

（4）在对话框界面中加入几个button控件和文本框。同一时候加入处理函数。相应的文本框要加入value型的变量m_lat，m_long，m_Zoom_Level

（5）在打开地图的处理函数中增加Navigate函数，Navigate函数是web browser控件引入外部网页到MFC中的函数。

比如:

voidCForth_ProjDlg::OnBnClickedButton1_OpenMap()

{

  

   m_map.Navigate(_T("E:/googleMap/googleMap_Online_js/google.html"),NULL,NULL,NULL,NULL);

}

当中E:/googleMap/googleMap_Online_js/google.html是javascript语言写的脚本。到此位置。最主要的功能已经实现了，假设须要与google地图交互，请继续往下看。

javascript编写的google.html脚本例如以下所看到的:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/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 地图 JavaScript API 演示样例: 地图标记</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.     function initialize()
  11.     {
  12.         if( GBrowserIsCompatible() )//假设浏览器支持google地图
  13.         {
  14.             map = new GMap2(document.getElementById("map_canvas"));//定义一个地图变量。不加keywordvar，表明是一个全局变量
  15.                map.setCenter(new GLatLng(22.536, 113.956), 14);//设置初始中心，缩放级别
  16.             //map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world"));//显示一个气泡信息
  17.              map.addControl(new GLargeMapControl());//添加大的缩放条
  18.            map.enableContinuousZoom();
  19. 			map.addControl(new GScaleControl(true));
  20.              map.addControl(new GSmallMapControl());//添加小的缩放条
  21.             map.addControl(new GMapTypeControl(true));//添加地图类型切换button
  22.  
  23.             map.addControl(new GSmallZoomControl());
  24.  
  25.             var point = new GLatLng(22.536, 113.956); //生成一个坐标点
  26.             map.addOverlay(new GMarker(point)); //添加一个地图标记
  27.            // GEvent.addListener(map, "click", function() {alert("click map");});//注冊单击事件的监听器，设置响应函数
  28.         }
  29.     }
  30.     </script>
  31.  
  32.     <script type="text/javascript">
  33.     function TansTo(lat, lng,level)//转到指定位置，有三个參数，纬度、经度缩放级别
  34.     {
  35.     	//alert(level);//測试參数是否传递过来
  36.     	var level_01=parseInt(level,10);//类型转换。没有转换会出错
  37.          map.setCenter(new GLatLng(lat, lng), level_01);//设置初始中心，缩放级别
  38.          //map.setZoom(level_01);// 单独设置缩放级别函数
  39.     }
  40.     </script>
  41.  
  42.      <script type="text/javascript">
  43.     function Set_Zoom(level)//改变缩放级别
  44.     {
  45.        // alert(level);//測试參数是否传递过来
  46.         var level_01=parseInt(level,10);//类型转换。没有转换会出错
  47.       //  map.panTo(new GLatLng(lat, lng));
  48.          //map.setCenter(new GLatLng(lat, lng), level);//设置初始中心。缩放级别
  49.          map.setZoom(level_01);
  50.     }
  51.     </script>
  52.  
  53.   </head>
  54.   <body  onload="initialize()" onunload="GUnload()"> <!--//页面载入完毕后运行initialize()函数-->
  55.     <div id="map_canvas" style="width: 500px; height: 365px"></div><!--定义名为map_canvas的DIV-->
  56.   </body>
  57. </html>

（6）更改中心位置须要涉及到从MFC中向JS脚本文件里的函数传递參数的问题了，以下開始解说这一部分。

此处介绍一种通过CWebPage类来解决此问题的方法：

（a）、从网上下载CWebPage.h和CWebPage.cpp。将其增加project中。

（b）、在对话框或者视图的实现文件里，增加#include "WebPage.h"，在button的响应函数中就能够调用javascript函数了。详细代码例如以下：

（c）在js文件里编写TansTo函数；以上脚本中有写，

（d）通过界面设置缩放级别。

前面讲过，加入三个文本框。给文本框加入value型变量。在传參数控件的处理函数中写入下面程序：

  1. void CForth_ProjDlg::OnBnClickedButton2_ChangeCenter()
  2. {
  3. 	// TODO: 在此加入控件通知处理程序代码
  4. 	UpdateData(TRUE);
  5. 	CWebPage web;
  6. 	web.SetDocument(m_map.get_Document());
  7. 	CComVariant varResult;
  8. 	const CString funcName("TansTo");
  9. 	//const CString m_latitude("23.1650922");//传递的參数：纬度
  10. 	//const CString m_longtitude("113.4752355");//经度
  11. 	const CString m_latitude(m_lat);
  12. 	const CString m_longtitude(m_long);
  13. 	const CString m_lev(m_Zoom_Level);
  14. 	web.CallJScript(funcName,m_latitude,m_longtitude,m_lev);
  15. }

到此为止。我们在线的google地图已经做好了，在此过成中，遇到了几个问题：第一、从网上下载CWebPage.h和CWebPage.cpp在我的vs2010中打开有错误。说什么+号重载的不正确。第二、向js脚本中传递缩放等级的时候一直报错，这个问题困扰了一上午。最后我将变量做加法运算，发现结果是字符串运算的结果，所以在js中处理缩放等级的时候用了一个perseInt函数转换格式。为什么纬度和经度的不须要格式转换而缩放等级须要呢？这个我搞不明确。欢迎不吝赐教！

离线Google 地图步骤：

为了实现能在没有网络的情况下操作地图。须要Google地图离线化，离线地图我在网上找了非常多资料，可是大部分资料是不适合使用的，不适合的原因主要是js脚本和离线瓦片地图的路径格式不正确，找了非常多不适合用的资料，最后当我在搜索google地图api的某个函数的时候，搜到了一哥们的博客，博客中有js脚本，有怎么样下载瓦片地图。哥们博客地址为

http://cjnetwork.iteye.com/blog/1485328，将当中的js打开，地图就出来了，后来我下载了我们须要地方的瓦片地图。输入经纬度，立即就找到了相应的地址。

将js脚本稍作改动，就能够从MFC中向地图传递參数了，离线地图与在线地图相比，载入地图的速度更快了。

由于离线相应的js脚本不止一个，有非常多是不须要改动的。对外的一个js编写的html文件例如以下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. 	#map_canvas{
  8. 		background-color: #CCC;
  9. 		width:600px;
  10. 		height: 600px;
  11.   		position: absolute;
  12.   		bottom:0px;
  13.   		left:0;
  14.   		right:0;
  15.   		top:20;
  16.   		margin: 0;
  17.   		padding: 0;
  18. 	}
  19. </style>
  20.  
  21. <!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> -->
  22. <!--<script type="text/javascript" src="http://www.google.com/jsapi"></script>
  23. <script type="text/javascript" src="http://maps.google.com/maps/api/js?
  24.  
  25. v=3&sensor=false"></script>-->
  26. <script type="text/javascript" src="mapapi.js"></script>
  27. <script type="text/javascript">
  28. var map;
  29. //var myCenter = new google.maps.LatLng(29.568381,106.552219);//重庆
  30. var myCenter = new google.maps.LatLng(23.1650922,113.4752355);
  31. function CoordMapType() {
  32. }
  33. CoordMapType.prototype.tileSize = new google.maps.Size(256,256);//瓦片图片的大小
  34. CoordMapType.prototype.maxZoom = 21;
  35.  
  36. CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  37.   var div = ownerDocument.createElement('div');
  38.   div.innerHTML = '<img name="" src="./tiles/' + zoom + '/' + coord.x + '/' + coord.y + '.png"/>';
  39.   //alert(div.innerHTML);
  40. //  div.innerHTML = coord.x + '    ' +  coord.y   + '    ' + zoom;
  41. //  div.innerHTML = coord;
  42.   div.style.width = this.tileSize.width + 'px';
  43.   div.style.height = this.tileSize.height + 'px';
  44.   div.style.fontSize = '10';
  45.   div.style.borderStyle = 'solid';
  46.   div.style.borderWidth = '1px';
  47.   div.style.borderColor = '#AAAAAA';
  48.   return div;
  49. };
  50.  
  51. CoordMapType.prototype.name = "Tile #s";
  52. CoordMapType.prototype.alt = "Tile Coordinate Map Type";
  53.  
  54. var coordinateMapType = new CoordMapType();
  55.  
  56. function initialize() {
  57.   var mapOptions = {
  58.     zoom: 15,
  59.     center: myCenter,
  60. 	mapTypeId: "coordinate"
  61.   };
  62.   map = new google.maps.Map(document.getElementById("map_canvas"),
  63.       mapOptions);
  64.  
  65.    map.mapTypes.set('coordinate',coordinateMapType);
  66. }
  67. </script>
  68.  
  69.  <script type="text/javascript">
  70.     function TansTo(lat, lng,level)//转到指定位置，有两个參数。纬度和经度
  71.     {
  72.     	//alert(level);//測试參数是否传递过来
  73.     	var level_01=parseInt(level,10);//类型转换，没有转换会出错
  74.          map.setCenter(new google.maps.LatLng(lat, lng), level_01);//设置初始中心，缩放级别
  75.          //map.setZoom(level_01);// 单独设置缩放级别函数
  76.     }
  77.     </script>
  78.  
  79.      <script type="text/javascript">
  80.     function Set_Zoom(level)//转到指定位置，有两个參数。纬度和经度
  81.     {
  82.        // alert(level);//測试參数是否传递过来
  83.         var level_01=parseInt(level,10);//类型转换。没有转换会出错
  84.       //  map.panTo(new GLatLng(lat, lng));
  85.          //map.setCenter(new GLatLng(lat, lng), level);//设置初始中心，缩放级别
  86.          map.setZoom(level_01);
  87.     }
  88.     </script>
  89.  
  90. </head>
  91.  
  92. <body onLoad="initialize()">
  93. <div>
  94.  
  95. </div>
  96. <div id="map_canvas"></div>
  97. </body>
  98. </html>

接下来我想记一下google API的相关东西，给出网页例如以下：

http://www.360doc.com/content/11/0201/23/2475285_90383000.shtml

总结，我将这段时间的google地图api的源码上传到了我的百度网盘：有须要的能够下载!

地址为：http://pan.baidu.com/s/1jGuUCq6

在VC/MFC中嵌入Google地图——图文并茂的更多相关文章

  1. 网页中嵌入google地图

    一丶前言 大致需求:美国地图中标记分布的仓库图钉(鼠标经过显示地址详情),通过输入寄收件地邮编来在地图上定位位置添加图钉,将寄件地,选择的仓库,收件地图钉折线相连接,表示大致路线. 一丶google开 ...

  2. 网页中嵌入百度地图报错：The request has been blocked,the content must served over Https

    网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...

  3. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  4. 在ActiveReports页面报表中显示Google地图

    有些报表需求中需要我们显示国家.城市等地址信息,在报表中添加地图信息会让报表给最终用户代码更多有效信息. 在报表中可以将地图作为图片添加进来,当一个图片显示在报表中时,该图片必须存放到本地计算机或者服 ...

  5. VC/MFC中计算程序运行时间

    转自原文VC/MFC中计算程序运行时间 说明,这四种方法也分别代表了类似的实现,在MFC中,所可以从哪些类集合去考虑. 方法一 利用GetTickCount函数(ms) CString str; lo ...

  6. 使用CefSharp在.NET中嵌入Google kernel

    原文:使用CefSharp在.NET中嵌入Google kernel 使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分 ...

  7. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  8. VC++ MFC中如何将应用程序的配置信息保存到注册表中（二）

    在上一篇中介绍了几个写入注册表数据和读取注册表数据的接口,并介绍了使用方法. 这一片教你如何使得你的应用程序在下次打开时保持上一次关闭前的状态. 在上一篇添加的代码的基础上,要添加WM_CLOSE消息 ...

  9. VC++/MFC中调用CHM帮助文档的方法

    转载:http://blog.csdn.net/hediping9811/article/details/23341387 (1)用Word编辑好帮助文档,并保存为网页格式,如mhtml格式. (2) ...

随机推荐

  1. python 内存泄露的诊断 - 独立思考 - ITeye技术网站

    python 内存泄露的诊断 - 独立思考 - ITeye技术网站 python 内存泄露的诊断 博客分类: 编程语言: Python Python多线程Blog.net  对于一个用 python ...

  2. Java 螺纹第三版 第一章Thread介绍、 第二章Thread创建和管理学习笔记

    第一章 Thread导论 为何要用Thread ? 非堵塞I/O      I/O多路技术      轮询(polling)      信号 警告(Alarm)和定时器(Timer) 独立的任务(Ta ...

  3. cURL安装和使用笔记

    0.前言     cURL是一个利用URL语法在命令行下工作的文件传输工具.它支持文件上传和下载,所以是综合传输工具,但习惯称cURL为下载工具.cURL还包含了用于程序开发的libcurl.cURL ...

  4. Function 详解（一）

    一直想写一系列关于javascript的东西,可惜从申请博客以来就一直抽不出时间来好好写上一番,今天终于熬到周末,是该好好整理一下,那么先从声明函数开始吧; 总所周知,在javascript中有匿名函 ...

  5. java特权制度设计篇

    数据库表设计 1.1.1.   模块管理(jk_module) 项 类型 说明 id long 就是数据库记录idx号 name string 模块名称 orderid int 排序id  由小到大显 ...

  6. 2013 吉林通化邀请赛 Play Game 记忆化搜索

    dp[ba][ta][bb][tb]表示a堆牌从下面拿了ba张,从上面拿了ta张.b堆牌从下面拿了bb张,从上面拿了tb张.当前玩家能得到的最大的分数. 扩展方式有4种,ba+1,ta+1,bb+1, ...

  7. Linux段管理，BSS段，data段，.rodata段，text段

    近期在解决一个编译问题时,一直在考虑一个问题,那就是Linux下可执行程序执行时内存是什么状态,是依照什么方式分配内存并执行的.查看了一下资料.就此总结一下,众所周知.linux下内存管理是通过虚存管 ...

  8. C strstr() 函数

    包含文件:string.h 函数名: strstr 函数原型:extern char *strstr(const char *str1, const char *str2); 语法:* strstr( ...

  9. python(abi) RPM DEB Download

    python(abi) RPM DEB Download python(abi) RPM DEB Download

  10. hdu1158（dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1158 分析:dp[i][j]表示第i个月用j个人需要花费的最少费用: 则状态转移方程为:dp[i][j ...