使用Bing Maps API绘制圆形不显示问题求助

你的代码存在两个关键问题，导致圆形和信息框无法渲染：

1. 控件异步加载未正确处理 #

Bing Maps的脚本是异步加载的，body的onload事件可能在API类（比如Microsoft.Maps.Circle、Microsoft.Maps.Infobox）完全初始化前就触发，导致创建元素的代码执行失败。

2. Circle构造函数参数格式错误 #

当前Bing Maps V8 API要求Circle通过配置对象传入中心坐标、半径和样式，而非旧版的位置+半径+配置的参数顺序。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Bing Maps Example</title>
    <meta charset="utf-8" />
    <!-- 新增callback参数，让控件加载完成后再执行初始化函数 -->
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=MYKEY&callback=loadMapScenario'></script>
    <script type='text/javascript'>
        function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                center: new Microsoft.Maps.Location(51.7353, 7.1350),
                zoom: 12
            });
            
            // 调整Circle创建方式：将center、radius放入options对象
            var circle = new Microsoft.Maps.Circle({
                center: new Microsoft.Maps.Location(51.7369, 7.1350),
                radius: 1852, // 1海里=1852米
                strokeColor: 'red', 
                strokeThickness: 2, 
                fillColor: 'rgba(255,0,0,0.2)' 
            });
            map.entities.push(circle);
            
            // 信息框默认隐藏，点击圆形时显示（可选优化）
            var infobox = new Microsoft.Maps.Infobox(
                new Microsoft.Maps.Location(51.7369, 7.1350), 
                { 
                    title: 'TEST_TITLE',
                    description: 'TEST_DESCRIPTION',
                    visible: false 
                });
            infobox.setMap(map);
            
            Microsoft.Maps.Events.addHandler(circle, 'click', function () {
                infobox.setOptions({ visible: true });
            });
        }
    </script>
</head>
<body>
    <div id='myMap' style='width: 800px; height: 600px;'></div>
</body>
</html>

关键修改说明 #

• 脚本加载回调：在Bing Maps的脚本URL后添加&callback=loadMapScenario，确保API完全加载后再执行地图初始化逻辑，避免类未定义的错误。
• Circle参数调整：将原来的位置、半径、配置三个参数，合并为一个包含center、radius、样式属性的配置对象，符合V8 API的规范。
• 信息框优化：默认设为visible: false，点击圆形时再显示，符合常规交互逻辑（原代码中visible: true也可以正常显示，但结合点击事件更合理）。

内容的提问来源于stack exchange，提问作者vba-nerd