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

首先。做这个须要用到的知识有。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脚本例如以下所看到的:

<!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"));//定义一个地图变量。不加keywordvar,表明是一个全局变量 
               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));//添加地图类型切换button 
        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");});//注冊单击事件的监听器,设置响应函数 
    } 
}     
&lt;/script&gt; 
 
&lt;script type="text/javascript"&gt; 
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);// 单独设置缩放级别函数  
} 
&lt;/script&gt; 
 
 &lt;script type="text/javascript"&gt; 
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); 
} 
&lt;/script&gt; 

</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。将其增加project中。

   (b)、在对话框或者视图的实现文件里,增加#include "WebPage.h",在button的响应函数中就能够调用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脚本,有怎么样下载瓦片地图。哥们博客地址为

IT虾米网,将当中的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="IT虾米网"></script> -->
<!--<script type="text/javascript" src="IT虾米网"></script>
<script type="text/javascript" src="IT虾米网?

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>

 &lt;script type="text/javascript"&gt; 
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); 
} 
&lt;/script&gt; 

</head>

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

</div>
<div id="map_canvas"></div>
</body>
</html>


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

IT虾米网


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

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












评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!