如何在Bing地图中为不同邮政编码添加边界、图钉并自动居中展示

现有代码问题汇总 #

• 仅处理了第一个邮编返回结果，未遍历所有邮编的返回数据，导致仅显示单条边界和单枚图钉
• 图钉位置参数传递错误，未取返回结果中的*质心坐标（Centroid）*作为图钉锚点
• 地图容器ID不匹配：JS逻辑中调用的是divMap，HTML实际定义的ID是myMap
• Bing地图SDK引入标签未闭合，会导致脚本加载异常
• 未收集所有地理元素的边界范围，无法实现自动居中适配

修正后完整代码 #

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bing地图邮编边界展示</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id='printoutPanel'></div>
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        </div>
    </form>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=XXXXXXXXXXXX&callback=GetMap'></script>
    <script type='text/javascript'>
    function GetMap() {
        // 替换为你实际的Bing地图密钥
        const bmKey = '你的Bing地图密钥';
        var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: bmKey,
            center: new Microsoft.Maps.Location(27.994402, -81.760254),        
            zoom: 7,
        });
        // 待展示的邮编数组
        var zipCodes = ['27006', '27007', '27009', '27011', '27012', '27013', '27014','27016'];
        var geoDataRequestOptions = {
            entityType: 'Postcode1',
            getAllPolygons: false
        };
        // 存储所有地理元素的坐标用于后续自动适配视野
        var locations = [];
        Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
            Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(zipCodes, geoDataRequestOptions, map, function (data) {
                if (data.results && data.results.length > 0) {
                    // 遍历所有邮编的返回结果
                    data.results.forEach(function(result, index) {
                        // 添加邮编边界
                        map.entities.push(result.Polygons);
                        // 取邮编区域质心作为图钉位置
                        var pinLocation = result.Centroid;
                        var pin = new Microsoft.Maps.Pushpin(pinLocation, {
                            title: '邮编 ' + result.name,
                            subTitle: ' ',
                            text: (index + 1).toString()
                        });
                        map.entities.push(pin);
                        // 将质心加入位置数组
                        locations.push(pinLocation);
                        // 同时加入边界多边形的所有顶点，确保边界也能完整展示
                        if(result.Polygons && result.Polygons.length > 0) {
                            result.Polygons.forEach(function(poly) {
                                locations = locations.concat(poly.getLocations());
                            });
                        }
                    });
                    // 自动调整地图视野，所有元素都完整展示，预留30px内边距避免元素贴边
                    var bounds = Microsoft.Maps.LocationRect.fromLocations(locations);
                    map.setView({ bounds: bounds, padding: 30 });
                }
            }, null, function errCallback(callbackState, networkStatus, statusMessage) {
                console.log(callbackState);
                console.log(networkStatus);
                console.log(statusMessage);
            });
        });
    }
    </script>
</body>
</html>

功能说明 #

• 遍历所有邮编的返回结果，为每个邮编区域同时添加边界和对应图钉，图钉文字对应序号、标题显示对应邮编
• 自动收集所有图钉位置和边界顶点生成最佳视野范围，自动调整地图中心和缩放等级，保证所有元素完整可见
• 修复了原代码中ID不匹配、标签未闭合的基础错误

内容的提问来源于stack exchange，提问作者A.Goutam