如何在iOS应用中加载Google StreetViewCoverageLayer？JS集成时谷歌地图API加载方法咨询

阿华AIGC实验室

2026-4-29

解决iOS中JSContext调用谷歌地图API时google对象未定义的问题

你遇到的核心问题是：JSContext是一个独立的纯JavaScript运行环境，没有浏览器提供的DOM/BOM API，也不会自动加载外部脚本，所以直接调用google.maps相关对象时会找不到google变量。下面给你两种可行的解决方案，优先推荐第二种，因为更适配谷歌地图API的运行环境：

方案一：使用WKWebView替代JSContext（推荐）

谷歌地图API依赖浏览器的window、document等环境，WKWebView提供了完整的浏览器运行环境，能完美兼容谷歌地图API的加载和使用，还能方便地实现原生与JS的交互。

步骤1：创建本地HTML文件

在项目中新建一个MapView.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        let mapInstance;
        let streetViewLayer;

        // 谷歌地图初始化完成后的回调
        function initMap(apiKey) {
            // 创建基础地图
            mapInstance = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 39.9042, lng: 116.4074}, // 示例坐标：北京
                zoom: 12
            });
            // 添加街景覆盖层
            streetViewLayer = new google.maps.StreetViewCoverageLayer();
            streetViewLayer.setMap(mapInstance);
            // 通知iOS原生层初始化完成
            window.webkit.messageHandlers.mapCallback.postMessage({
                status: "success",
                msg: "街景覆盖层已添加到地图"
            });
        }

        // 加载谷歌地图API
        function loadGoogleMaps(apiKey) {
            if (typeof google !== 'undefined') {
                initMap(apiKey);
                return;
            }
            const script = document.createElement('script');
            script.src = `https://maps.googleapis.com/maps/api/js?v=3&key=${apiKey}&callback=initMap`;
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }
    </script>
</body>
</html>

步骤2：iOS端集成WKWebView并实现交互

修改你的ViewController代码：

import UIKit
import WebKit

class MapViewController: UIViewController, WKScriptMessageHandler {
    
    private var webView: WKWebView!
    private let apiKey = "你的谷歌地图API Key"

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        loadLocalHTML()
    }

    // 配置WKWebView
    private func setupWebView() {
        let config = WKWebViewConfiguration()
        // 添加消息处理器，接收JS的回调
        config.userContentController.add(self, name: "mapCallback")
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(webView)
    }

    // 加载本地HTML文件
    private func loadLocalHTML() {
        guard let htmlPath = Bundle.main.path(forResource: "MapView", ofType: "html") else {
            print("找不到本地HTML文件")
            return
        }
        let fileURL = URL(fileURLWithPath: htmlPath)
        webView.loadFileURL(fileURL, allowingReadAccessTo: fileURL.deletingLastPathComponent())
        
        // 调用JS加载谷歌地图API
        webView.evaluateJavaScript("loadGoogleMaps('\(apiKey)')") { result, error in
            if let error = error {
                print("JS调用失败：\(error.localizedDescription)")
            }
        }
    }

    // 接收JS发送的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "mapCallback", let body = message.body as? [String: Any] {
            print("状态：\(body["status"] ?? "未知")")
            print("消息：\(body["msg"] ?? "无消息")")
        }
    }
}

方案二：给JSContext模拟DOM环境（不推荐）

如果一定要使用JSContext，你需要手动引入模拟DOM/BOM的库（比如jsdom），但这种方式配置复杂，且性能和兼容性不如WKWebView，仅作了解：

先在项目中引入jsdom库（通过CocoaPods或手动导入）
修改你的JS代码，先初始化DOM环境再加载谷歌API：

// 模拟DOM环境（需要先引入jsdom）
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

// 然后加载谷歌API（注意：这种方式仍可能存在兼容性问题）
function loadGoogleMapsAPI(apiKey) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?v=3&key=${apiKey}`;
        script.onload = () => resolve(google);
        script.onerror = () => reject(new Error('加载谷歌API失败'));
        document.head.appendChild(script);
    });
}

async function getStreetViewCoverageLayer(apiKey) {
    try {
        const google = await loadGoogleMapsAPI(apiKey);
        const layer = new google.maps.StreetViewCoverageLayer();
        return "街景覆盖层初始化成功";
    } catch (err) {
        return `错误：${err.message}`;
    }
}