如何捕获Bing Maps V8 Web Control中经纬度错误避免脚本崩溃

问题场景 #

开发全球客户地图展示项目时，通过Bing Maps API获取客户坐标，但部分客户坐标在地图展示时触发「Invalid latitude」错误。数据库中坐标显示正常且由Bing Maps API返回，需捕获该错误避免脚本崩溃。

原代码 #

let map;
let searchManager;
let customers = <?= json_encode($elements); ?>;
let pins = [];
let iconURL = '';

function GetMap() {
    var statusDropdownValue = parseInt($('#status').val());

    map = new Microsoft.Maps.Map('#map', {
        zoom: 1
    });

    $.each(customers, function(index, value) {
        var customerLocation = new Microsoft.Maps.Location(value['latitude'], value['longitude']);

        var pin = new Microsoft.Maps.Pushpin(customerLocation, {
            icon: baseURL + 'assets/images/pin.png'
        });

        pin.metadata = {
            id: value['id'],
            customerName: value['customer_name'],
            postCode: value['post_code'],
            city: value['city'],
            countryCode: value['country_code']
        };

        pins.push(pin);
    });

    Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
        clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
        map.layers.insert(clusterLayer);
    });

    Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
        var manager = new Microsoft.Maps.AutosuggestManager({ map: map });
        manager.attachAutosuggest('#search', '#search-container-search-bar', selectedSuggestion);
    });
}

错误信息 #

Uncaught Error: Invalid latitude
n https://r.bing.com/rp/iKR9c24bDSIz79-enVSnBoJvZx8.br.js:1
GetMap http://localhost/projects/BattermannTillery_HK_Locator/maps:101
each jQuery
GetMap http://localhost/projects/BattermannTillery_HK_Locator/maps:100
notifyMapReadyForBootstrap https://www.bing.com/api/maps/mapcontrol?callback=GetMap&setMkt=en-US&setLang=en&key=AlV57vXOvuSENqgwu6hnNKGhiLf85dbTMlnDY81z2cGq40L1xkMdXUVSkEhvqfvv:12
<anonymous> https://r.bing.com/rp/RENSVX2edu6CiHiu-aMi-GbtqbA.br.js:1
<anonymous> https://r.bing.com/rp/RENSVX2edu6CiHiu-aMi-GbtqbA.br.js:1

解决方案 #

通过前置坐标合法性校验+try-catch异常捕获的组合方案，过滤非法数据并避免脚本崩溃：

修改后的代码 #

let map;
let searchManager;
let customers = <?= json_encode($elements); ?>;
let pins = [];
let iconURL = '';

function GetMap() {
    var statusDropdownValue = parseInt($('#status').val());

    map = new Microsoft.Maps.Map('#map', {
        zoom: 1
    });

    $.each(customers, function(index, value) {
        // 前置校验：确保坐标是合法的数字且在有效范围内
        const lat = parseFloat(value['latitude']);
        const lng = parseFloat(value['longitude']);
        
        if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
            console.warn(`跳过非法坐标客户：${value['customer_name']}，纬度：${lat}，经度：${lng}`);
            return true; // 跳过当前循环，处理下一个客户
        }

        try {
            // 用try-catch包裹可能抛出异常的API调用
            var customerLocation = new Microsoft.Maps.Location(lat, lng);

            var pin = new Microsoft.Maps.Pushpin(customerLocation, {
                icon: baseURL + 'assets/images/pin.png'
            });

            pin.metadata = {
                id: value['id'],
                customerName: value['customer_name'],
                postCode: value['post_code'],
                city: value['city'],
                countryCode: value['country_code']
            };

            pins.push(pin);
        } catch (error) {
            console.error(`创建客户标记失败：${value['customer_name']}，错误信息：${error.message}`);
            return true; // 跳过当前循环，避免影响后续客户处理
        }
    });

    Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
        clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
        map.layers.insert(clusterLayer);
    });

    Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
        var manager = new Microsoft.Maps.AutosuggestManager({ map: map });
        manager.attachAutosuggest('#search', '#search-container-search-bar', selectedSuggestion);
    });
}

关键修改说明 #

1. 前置坐标校验：将数据库返回的坐标转为浮点数，检查是否为有效数字，同时验证纬度（-90_{90）和经度（-180}180）的合法范围，非法数据直接跳过并打印警告。
2. try-catch异常捕获：即使做了前置校验，仍可能存在API内部的异常情况，用try-catch包裹创建Location和Pushpin的逻辑，捕获错误后跳过当前客户，确保脚本不会崩溃，同时打印错误信息便于后续排查问题。

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