基於MFC與第三方類CWebPage的百度地圖API開發範例

時間 2019-11-24

標籤基於 mfc 第三方 cwebpage 百度地圖 api 開發範例简体版

原文原文鏈接

在進行百度地圖API開發以前你須要到http://developer.baidu.com/map申請密匙javascript

密匙申請以後就能夠進行百度地圖API的開發了。css

下面咱們以在visual c++6.0裏進行地圖座標標註爲範例講解百度地圖API開發html

1.新建一個工廠MFC工程取名爲GeoDemojava

2.選擇爲基於對話框的工程c++

3.建立成功以下web

4.簡單調整頁面佈局api

5.在界面插入一個瀏覽器控件瀏覽器

6.插入以後的效果函數

7.先運行一下看看工具

8.接下來咱們寫一個簡單的html頁面,代碼大概以下

其中也包括一個javascript函數,不會寫的可參考http://developer.baidu.com/map/jsdemo.htm#a1_2

咱們把這個html文件命名爲geodemo.html並放置到工程目錄下:

html源碼爲:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <style type="text/css">
 6 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
 7 #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
 8 #r-result{height:100%;width:20%;float:left;}
 9 </style>
10 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你本身申請的密匙"></script>
11 <title>百度地圖的Hello, World</title>
12 </head>
13 <body>
14 <div id="allmap"></div>
15 </body>
16 </html>
17 <script type="text/javascript">
18 var map = new BMap.Map("allmap");  
19 map.centerAndZoom(new BMap.Point(104.071216,30.666031), 12);
20 map.enableScrollWheelZoom();                            //啓用滾輪放大縮小
21 map.addControl(new BMap.NavigationControl());                                 
22 map.addControl(new BMap.OverviewMapControl());
23 map.addControl(new BMap.ScaleControl());                
24 map.enableScrollWheelZoom();                           
25 map.addControl(new BMap.MapTypeControl());
26 
27 var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默認縮放平移控件
28 
29 
30 function justmarkfun(JD,WD)
31 {
32     var marker1 = new BMap.Marker(new BMap.Point(JD,WD));  // 建立標註
33     window.map.addOverlay(marker1);              // 將標註添加到地圖中
34 }
35 </script>

固然裏面的一些屬性可參考百度地圖API說明進行編寫,我使用的是javascript 大衆版本

你們能夠根據本身的須要選擇不一樣類型的API

這裏我將地圖的初始中心定位在成都,關於經緯度的查詢能夠到網站:http://api.map.baidu.com/lbsapi/getpoint/index.html

9.咱們繼續爲對話框的瀏覽器控件關聯一個控件變量爲m_myweb

固然同時會提示添加CWebBroswer2類頭文件和源文件

10.爲顯示該點添加響應

11.在CGeoDemoDlg的OnInitDialog()函數中添加以下代碼:

注意,html文件要以url方式

12.導入CWebPage類,該類爲C++提供了一種javascript接口

咱們來看一個CWebPage一個簡單的接口說明:

1 bool CallJScript(const CString strFunc,const CString strArg1,const CString strArg2,CComVariant* pVarResult = NULL);

第一個參數表明要調用的js函數的函數名

第二個第三個參數表明要傳入的參數,顯然咱們應該講經度和緯度傳入其中

最後一個是js調用的返回值

13.將webpage.h頭文件包含到CGeoDemoDlg.cpp中同時在OnShow()添加以下代碼:

這裏m_JD和m_WD是與編輯框控件的兩個CString類型變量,傳入經度緯度值

這裏參數的個數要與javascript函數justmakefun函數的個數相同,並且順序

要保持一致

javascript代碼以下:

1 function justmarkfun(JD,WD)
2 {
3     var marker1 = new BMap.Marker(new BMap.Point(JD,WD));  // 建立標註
4     window.map.addOverlay(marker1);              // 將標註添加到地圖中
5 }