近期須要實驗室須要將在無人機地面站中嵌入地圖，在網上找了非常多資料，最終有些眉目了，
首先。做這個須要用到的知識有。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");});//注冊單擊事件的監聽器，設置響應函數
}
}
</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。將其增加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腳本，有怎么樣下載瓦片地圖。哥們博客地址為
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
地址為：http://pan.baidu.com/s/1jGuUCq6