NativeScript中如何在onMapReady外通过按钮点击添加Mapbox标记？

嘿，我一眼就发现问题所在啦！你在getRequest函数里调用args.map.addMarkers()的时候，这里的args根本就不存在——args只有在onMapReady这类由Mapbox触发的回调里才会传入，而按钮点击的getRequest函数并没有接收这个参数，更关键的是，你没有把地图实例保存下来供后续调用。

问题根源 #

• onMapReady里的args.map是Mapbox地图的实例，但这个实例只在该函数内部可用
• getRequest函数里直接用args.map会导致args未定义（你可以检查控制台，应该能看到类似args is not defined的错误），所以addMarkers根本没被正确执行

修复步骤 #

1. 保存地图实例：在模块级别声明一个变量，用来存储地图实例，这样后续的函数都能访问到它
2. 在onMapReady中赋值：地图初始化完成后，把args.map赋值给这个全局变量
3. 修改getRequest函数：使用保存的地图实例来调用addMarkers，同时修正函数里未定义的变量问题

修改后的完整JS代码 #

// 模块级别变量，保存地图实例
let mapInstance;

function onMapReady(args) {
    // 把地图实例保存到全局变量
    mapInstance = args.map;
    
    mapInstance.addMarkers([
        {
            id: 1,
            lat: -35.30505050,
            lng: -47.56263254,
            title: 'Company 1',
            subtitle: 'Subt 1',
            iconPath: 'markers/green_pin_marker.png',
            onTap: function () {
                console.log("'Nice location' marker tapped");
            },
            onCalloutTap: function () {
                console.log("'Nice location' marker callout tapped");
                // 这里原来的lati和long未定义，建议删除或者定义对应的变量
                // console.log(lati + long);
            }
        }
    ]).then(
        function (result) {
            console.log("Mapbox addMarkers done");
        },
        function (error) {
            console.log("mapbox addMarkers error: " + error);
        }
    )
}

exports.onMapReady = onMapReady;

exports.getRequest = function () {
    console.log("BUTTON TAPPED!");
    
    // 检查地图实例是否存在，避免空调用
    if (!mapInstance) {
        console.log("Map instance is not ready yet!");
        return;
    }
    
    mapInstance.addMarkers([
        {
            id: 2,
            lat: -35.30586500,
            lng: -47.56218500,
            title: 'Company 2',
            subtitle: 'Subt 2',
            iconPath: 'markers/green_pin_marker.png',
            onTap: function () {
                console.log(" marker tapped");
            },
            onCalloutTap: function () {
                console.log("marker callout tapped");
                // 同样，这里的lati和long未定义，需要处理
                // console.log(lati + long);
            }
        }
    ]).then(
        function (result) {
            console.log("Mapbox addMarkers done (ID 2)");
        },
        function (error) {
            console.log("mapbox addMarkers error (ID 2): " + error);
        }
    )
}

额外注意事项 #

• 我注释掉了两个console.log(lati + long)的代码，因为这两个变量在当前代码里没有定义，会导致报错，如果你需要使用坐标，可以从标记的属性里获取，比如在onCalloutTap里用this.lat和this.lng
• 建议在getRequest里先检查mapInstance是否存在，避免地图还没初始化完成就点击按钮导致的错误
• 确保markers/green_pin_marker.png路径正确，否则标记图标可能显示不出来

内容的提问来源于stack exchange，提问作者Guillermo Acosta