如何在iOS中通过Azure Maps WebSDK添加带点击弹窗的标注？

1. 修改本地HTML文件，添加标注逻辑 #

在你的本地HTML文件中，找到地图初始化的脚本区块，补充以下代码实现标注创建和点击事件：

<script type="text/javascript">
    var map;

    function initMap() {
        // 保留你原有的地图初始化代码
        map = new atlas.Map('myMap', {
            center: [-122.33, 47.6],
            zoom: 12,
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: '你的Azure Maps密钥'
            }
        });

        // 等待地图加载完成后执行标注逻辑
        map.events.add('ready', function() {
            // 创建标注数据源
            var datasource = new atlas.source.DataSource();
            map.sources.add(datasource);

            // 添加单个标注（可替换为你的目标坐标和信息）
            var demoPin = new atlas.data.Feature(
                new atlas.data.Point([-122.33, 47.6]), 
                {
                    title: '示例地点',
                    description: '这是标注的详细说明内容'
                }
            );
            datasource.add(demoPin);

            // 创建标注图层，使用内置图标
            var pinLayer = new atlas.layer.SymbolLayer(datasource, null, {
                iconOptions: {
                    image: 'pin-round-blue',
                    anchor: 'bottom'
                }
            });
            map.layers.add(pinLayer);

            // 绑定标注点击事件，展示信息
            map.events.add('click', pinLayer, function(e) {
                if (e.shapes?.length > 0) {
                    var props = e.shapes[0].getProperties();
                    // 用弹窗展示信息，也可自定义HTML弹窗
                    alert(`${props.title}\n${props.description}`);
                }
            });
        });
    }
</script>

如果需要从iOS端动态传递标注数据，可在HTML中新增供Swift调用的JS函数：

<script type="text/javascript">
    // 接收iOS传递的参数，动态添加标注
    function addDynamicPin(lng, lat, title, desc) {
        if (!map) return;
        
        // 复用已有数据源，没有则创建
        var datasource = map.sources.get('dynamicPinSource') || new atlas.source.DataSource('dynamicPinSource');
        if (!map.sources.get('dynamicPinSource')) {
            map.sources.add(datasource);
            // 创建标注图层
            var pinLayer = new atlas.layer.SymbolLayer(datasource, null, {
                iconOptions: {
                    image: 'pin-red',
                    anchor: 'bottom'
                }
            });
            map.layers.add(pinLayer);
        }
        
        var newPin = new atlas.data.Feature(
            new atlas.data.Point([lng, lat]), 
            {title: title, description: desc}
        );
        datasource.add(newPin);
    }
</script>

2. iOS Swift端与HTML交互（可选） #

如果需要动态传递标注数据，在Swift代码中加载HTML后调用JS函数：

import UIKit
import WebKit

class MapVC: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 配置WebView
        let config = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        // 加载本地HTML文件
        guard let htmlPath = Bundle.main.path(forResource: "azure-map", ofType: "html") else { return }
        let fileURL = URL(fileURLWithPath: htmlPath)
        webView.loadFileURL(fileURL, allowingReadAccessTo: fileURL.deletingLastPathComponent())
    }
    
    // 地图加载完成后调用JS添加标注
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 示例参数：经度、纬度、标题、描述
        let lng = -122.33
        let lat = 47.6
        let title = "西雅图"
        let desc = "美国华盛顿州核心城市"
        
        let jsCall = "addDynamicPin(\(lng), \(lat), '\(title)', '\(desc)');"
        webView.evaluateJavaScript(jsCall) { _, error in
            if let err = error { print("JS调用失败：\(err)") }
        }
    }
}

关键注意点 #

• 确保HTML文件已引入Azure Maps WebSDK脚本：<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
• 标注图标可使用内置样式（如pin-round-blue、pin-red），也可自定义上传图标
• 点击后的信息展示，除了弹窗，还可通过WKScriptMessageHandler将数据传回iOS原生端展示

内容的提问来源于stack exchange，提问作者Dipesh Pokhrel