基于Microsoft.Maps.WellKnownText在Bing地图加载多边形失败排查

我帮你排查了这段代码，导致多边形未显示的核心问题和修复方法如下：

核心问题：地图初始视图与多边形位置不匹配 #

你的地图初始中心点设为 (33.146190241986119, -86.482209833117281)（美国阿拉巴马州区域），但要绘制的多边形坐标位于西雅图附近（-122.358 47.653 等），且缩放级别仅为7——当前地图视野完全覆盖不到多边形所在区域，所以多边形其实已经被创建，但你看不到它。

修复步骤 #

1. 让地图自动适配多边形范围（最灵活的方案） #

不需要手动调整中心和缩放，在添加多边形后，让地图自动定位到多边形的边界框，这样不管多边形在哪里都能自动适配：

// Add parsed shape to the map.
map.entities.push(polygon);
// 新增：让地图视图自动适配多边形的边界
map.setView({ bounds: polygon.getBounds() });

2. 确保Bing Maps凭证有效 #

你代码里的key是xxxx，请确保替换为有效的Bing Maps API密钥，否则地图本身可能无法正常加载，更别说绘制多边形了。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>binaryOperationsHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type='text/javascript'>
var map;
var polygon;
function loadMapScenario() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    center: new Microsoft.Maps.Location(33.146190241986119, -86.482209833117281),
    zoom: 7
});
//Load the Well Known Text module.
Microsoft.Maps.loadModule('Microsoft.Maps.WellKnownText', function () {
    //Parse well known text string.
    polygon = Microsoft.Maps.WellKnownText.read('POLYGON((-122.358 47.653, -122.348 47.649, -122.348 47.658, -122.358 47.658, -122.358 47.653))');
    //Add parsed shape to the map.
    map.entities.push(polygon);
    // 新增：自动适配多边形视图
    map.setView({ bounds: polygon.getBounds() });
});
}
</script>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=你的有效密钥&callback=loadMapScenario' async defer></script>
</body>
</html>

额外检查点 #

• 打开浏览器开发者工具（F12）查看Console标签，确认没有模块加载或密钥相关的报错，如果有需要针对性解决。
• 你的Well Known Text格式是正确的，这部分无需修改。

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