在VC/MFC中嵌入Google地图——图文并茂

时间：2014-05-02 20:28:49 阅读：521 评论：0 收藏：0 [点我收藏+]

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

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

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

在线Google 地图步骤：

（1）、建立基于对话框的MFC工程。

由于我对MFC基本不了解，所以从网上下载了个例子，但是不知道例子中那一部分是涉及google地图的部分，这个时候我只能一步步的从新建工程开始，建立了一个基于对话框的MFC工程，工程中自动生成了3个类，他们是(1)\classCThird_ProjApp:publicCWinApp\(2)\ classCForth_ProjDlg:publicCDialogEx\,(3)\ classCAboutDlg:publicCDialogEx

\此3个类中我只需要了解CForth_ProjDlg就可以了，因为我们接下来的操作对象是CForth_ProjDlg。

（2）、向工程中添加web browser控件。

方法如下：工具----选择工具箱项------COM组件，microsoft browser前面的复选框勾选上。（添加其他的active X控件也是同样的方法），然后在界面中添加控件。调整web browser控件的大小使之能显示我们需要的google地图。如图所示，

bubuko.com,布布扣

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

这样在工程中就多了两个文件，其中包含classCExplorer1:publicCWnd类及其实现。在CForth_ProjDlg类中多了一个 CExplorer1类型的变量m_map。

bubuko.com,布布扣

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

bubuko.com,布布扣

（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脚本如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例: 地图标记</title>
    <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script>
    <script type="text/javascript">    
    function initialize() 
    {
        if( GBrowserIsCompatible() )//如果浏览器支持google地图 
        {
            map = new GMap2(document.getElementById("map_canvas"));//定义一个地图变量，不加关键字var，表明是一个全局变量
               map.setCenter(new GLatLng(22.536, 113.956), 14);//设置初始中心，缩放级别
            //map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world"));//显示一个气泡信息
             map.addControl(new GLargeMapControl());//增加大的缩放条
           map.enableContinuousZoom();
			map.addControl(new GScaleControl(true));
             map.addControl(new GSmallMapControl());//增加小的缩放条
            map.addControl(new GMapTypeControl(true));//增加地图类型切换按钮
            
            map.addControl(new GSmallZoomControl());
            
            var point = new GLatLng(22.536, 113.956); //生成一个坐标点
            map.addOverlay(new GMarker(point)); //增加一个地图标记
           // GEvent.addListener(map, "click", function() {alert("click map");});//注册单击事件的监听器，设置响应函数
        }
    }    
    </script>

    <script type="text/javascript">
    function TansTo(lat, lng,level)//转到指定位置，有三个参数，纬度、经度缩放级别 
    {
    	//alert(level);//测试参数是否传递过来
    	var level_01=parseInt(level,10);//类型转换，没有转换会出错 
         map.setCenter(new GLatLng(lat, lng), level_01);//设置初始中心，缩放级别
         //map.setZoom(level_01);// 单独设置缩放级别函数 
    }
    </script>
    
     <script type="text/javascript">
    function Set_Zoom(level)//改变缩放级别 
    {
       // alert(level);//测试参数是否传递过来
        var level_01=parseInt(level,10);//类型转换，没有转换会出错
      //  map.panTo(new GLatLng(lat, lng));
         //map.setCenter(new GLatLng(lat, lng), level);//设置初始中心，缩放级别
         map.setZoom(level_01);
    }
    </script>
    
  </head>
  <body  onload="initialize()" onunload="GUnload()"> <!--//页面加载完成后执行initialize()函数-->
    <div id="map_canvas" style="width: 500px; height: 365px"></div><!--定义名为map_canvas的DIV-->
  </body>
</html>

（6）更改中心位置需要涉及到从MFC中向JS脚本文件中的函数传递参数的问题了，下面开始讲解这一部分。

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

（a）、从网上下载CWebPage.h和CWebPage.cpp。将其加入工程中。

（b）、在对话框或者视图的实现文件中，加入#include "WebPage.h"，在按钮的响应函数中就可以调用javascript函数了，具体代码如下：

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

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

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

void CForth_ProjDlg::OnBnClickedButton2_ChangeCenter()
{
	// TODO: 在此添加控件通知处理程序代码
	UpdateData(TRUE);
	CWebPage web;
	web.SetDocument(m_map.get_Document());
	CComVariant varResult;
	const CString funcName("TansTo");
	//const CString m_latitude("23.1650922");//传递的参数：纬度
	//const CString m_longtitude("113.4752355");//经度
	const CString m_latitude(m_lat);
	const CString m_longtitude(m_long);
	const CString m_lev(m_Zoom_Level);
	web.CallJScript(funcName,m_latitude,m_longtitude,m_lev);
}

到此为止，我们在线的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文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	#map_canvas{
		background-color: #CCC;
		width:600px;
		height: 600px;
  		position: absolute;
  		bottom:0px;
  		left:0;
  		right:0;
  		top:20;
  		margin: 0;
  		padding: 0;
	}
</style>


<!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> -->
<!--<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>-->
<script type="text/javascript" src="mapapi.js"></script>
<script type="text/javascript">
var map;
//var myCenter = new google.maps.LatLng(29.568381,106.552219);//重庆  
var myCenter = new google.maps.LatLng(23.1650922,113.4752355);
function CoordMapType() {
}
CoordMapType.prototype.tileSize = new google.maps.Size(256,256);//瓦片图片的大小 
CoordMapType.prototype.maxZoom = 21;

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement(‘div‘);
  div.innerHTML = ‘<img name="" src="./tiles/‘ + zoom + ‘/‘ + coord.x + ‘/‘ + coord.y + ‘.png"/>‘;
  //alert(div.innerHTML);
//  div.innerHTML = coord.x + ‘    ‘ +  coord.y   + ‘    ‘ + zoom;
//  div.innerHTML = coord;
  div.style.width = this.tileSize.width + ‘px‘;
  div.style.height = this.tileSize.height + ‘px‘;
  div.style.fontSize = ‘10‘;
  div.style.borderStyle = ‘solid‘;
  div.style.borderWidth = ‘1px‘;
  div.style.borderColor = ‘#AAAAAA‘;
  return div;
};


CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";

var coordinateMapType = new CoordMapType();

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: myCenter,
	mapTypeId: "coordinate"
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
      
   map.mapTypes.set(‘coordinate‘,coordinateMapType);
}
</script>

 <script type="text/javascript">
    function TansTo(lat, lng,level)//转到指定位置，有两个参数，纬度和经度
    {
    	//alert(level);//测试参数是否传递过来
    	var level_01=parseInt(level,10);//类型转换，没有转换会出错 
         map.setCenter(new google.maps.LatLng(lat, lng), level_01);//设置初始中心，缩放级别
         //map.setZoom(level_01);// 单独设置缩放级别函数 
    }
    </script>
    
     <script type="text/javascript">
    function Set_Zoom(level)//转到指定位置，有两个参数，纬度和经度
    {
       // alert(level);//测试参数是否传递过来
        var level_01=parseInt(level,10);//类型转换，没有转换会出错
      //  map.panTo(new GLatLng(lat, lng));
         //map.setCenter(new GLatLng(lat, lng), level);//设置初始中心，缩放级别
         map.setZoom(level_01);
    }
    </script>


</head>

<body onLoad="initialize()">
<div>

</div>
<div id="map_canvas"></div>
</body>
</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地图——图文并茂,布布扣,bubuko.com

在VC/MFC中嵌入Google地图——图文并茂

标签：googlemap 在线地图离线地图 google地图api

原文地址：http://blog.csdn.net/gaoxiangky/article/details/24848169

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行