如何在C++（VS2017/MFC/QT）环境中使用Google Map API？需实现离线/在线版本

Hey there! Let's break down how to implement both online and offline Google Map integration in your MFC app built with VS2017 and C++. I'll walk you through practical, actionable steps for each mode.

Since Google Maps relies heavily on its JavaScript API, the easiest way to integrate it into your MFC app is using the WebBrowser ActiveX Control to embed a custom HTML page that loads the Maps API. Here's how:

1. Add the WebBrowser Control to Your MFC Dialog

   • Open your dialog in the VS2017 resource editor, go to the Toolbox, find the "Web Browser" control (if it's missing, right-click the Toolbox → Choose Items → ActiveX Controls → Check "Microsoft Web Browser"), then drag it onto your dialog.
   • Associate it with a CWebBrowser2 member variable (e.g., m_webBrowser) via the Class Wizard.

2. Create a Local HTML Page for Google Maps
   Write a simple HTML file that loads the Google Maps JavaScript API (replace YOUR_API_KEY with your actual key from Google Cloud Console):

   <!DOCTYPE html>
   <html>
   <head>
       <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Fixes IE compatibility issues -->
       <title>Online Google Map</title>
       <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
       <script>
           let map;
           function initMap() {
               map = new google.maps.Map(document.getElementById("map-container"), {
                   center: { lat: 39.9042, lng: 116.4074 }, // Default to Beijing
                   zoom: 10
               });
           }
   
           // Add a function to let MFC control the map (e.g., set new center)
           function updateMapCenter(lat, lng) {
               map.setCenter(new google.maps.LatLng(parseFloat(lat), parseFloat(lng)));
           }
       </script>
   </head>
   <body onload="initMap()" style="margin:0;">
       <div id="map-container" style="width:100%;height:100%;"></div>
   </body>
   </html>
   

   Place this HTML file in your project's output directory, then load it in your MFC code:

   void CYourDialog::OnInitDialog()
   {
       CDialogEx::OnInitDialog();
       // Load the online map HTML
       m_webBrowser.Navigate(_T("file:///C:/YourProjectPath/online_map.html"));
       // Resize the control to fill the dialog if needed
       CRect rect;
       GetClientRect(&rect);
       m_webBrowser.MoveWindow(rect);
   }
   

3. Interact with the Map from MFC
   You can call JavaScript functions in the HTML page using InvokeScript to control the map from your C++ code:

   // Example: Update map center to Shanghai
   void CYourDialog::OnBtnSetCenter()
   {
       VARIANT args[2];
       args[0].vt = VT_BSTR;
       args[0].bstrVal = _T("31.2304").AllocSysString();
       args[1].vt = VT_BSTR;
       args[1].bstrVal = _T("121.4737").AllocSysString();
   
       VARIANT result;
       m_webBrowser.InvokeScript(_T("updateMapCenter"), args, &result);
   
       // Clean up BSTRs to avoid memory leaks
       SysFreeString(args[0].bstrVal);
       SysFreeString(args[1].bstrVal);
   }
   

Google doesn't offer an official offline SDK for C++, so we'll use a workaround with pre-downloaded map tiles and an open-source control. Here's the approach:

1. Download Offline Map Tiles

   • First, note that Google's Terms of Service prohibit unauthorized downloading of their map tiles. Instead, use open-source alternatives like OpenStreetMap (OSM) tiles, which allow offline use.
   • Use tools like Mobile Atlas Creator to download OSM tiles for your target region, organized in a folder structure like {zoom}/{x}/{y}.png.

2. Integrate the MapWinGIS Control
   MapWinGIS is a free, open-source ActiveX control that supports loading local tiles and works well with MFC:

   • Download and register MapWinGIS (run regsvr32.exe MapWinGIS.ocx as admin).
   • Add the control to your MFC dialog (same way as the WebBrowser control), then associate it with a CMap member variable (e.g., m_offlineMap).

3. Load Local Tiles in MFC
   Configure the control to use your pre-downloaded tiles:

   void CYourDialog::InitOfflineMap()
   {
       // Set the tile provider to custom local tiles
       CString tilePath = _T("C:/OfflineTiles/{z}/{x}/{y}.png");
       m_offlineMap.SetCustomTileProvider(tilePath);
       
       // Set initial view
       m_offlineMap.SetCenter(39.9042, 116.4074);
       m_offlineMap.SetZoom(10);
       // Show the control and hide the WebBrowser
       m_offlineMap.ShowWindow(SW_SHOW);
       m_webBrowser.ShowWindow(SW_HIDE);
   }
   

Add logic to detect network connectivity and switch modes on app startup:

#include <wininet.h>
#pragma comment(lib, "wininet.lib")

void CYourDialog::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Check network connection to Google Maps API
    BOOL isConnected = InternetCheckConnection(_T("http://maps.googleapis.com"), FLAG_ICC_FORCE_CONNECTION, 0);
    if (isConnected) {
        // Load online mode
        m_webBrowser.Navigate(_T("file:///C:/YourProjectPath/online_map.html"));
        m_webBrowser.ShowWindow(SW_SHOW);
        m_offlineMap.ShowWindow(SW_HIDE);
    } else {
        // Switch to offline mode
        InitOfflineMap();
    }
}

Key Notes #

• Google API Key: You need to register a key in the Google Cloud Console, enable the Maps JavaScript API, and set appropriate restrictions (e.g., by IP or app domain).
• Offline Compliance: Stick to OSM or other allowed tile sources to avoid violating Google's terms.
• WebBrowser Compatibility: The MFC WebBrowser uses IE by default; adding the X-UA-Compatible meta tag ensures it uses the latest IE/Edge rendering engine for better JS support.

内容的提问来源于stack exchange，提问作者Chanyoung Song