在HTML/JS中集成Bing Maps无显示问题求助

核心问题点 #

• HTML结构非法：<head>标签里嵌套了<body>标签，浏览器解析时会自动修正结构，导致页面元素布局混乱，影响地图渲染。
• 重复初始化地图：每次点击按钮都会创建新的Microsoft.Maps.Map实例，多次初始化同一容器会引发渲染异常。
• 脚本自动调用冲突：Bing Maps加载完成后会自动执行callback=GetMap，此时无参数传入，触发无效请求还干扰后续操作。
• 地图容器样式错误：#myMap的style属性包含多余转义引号"，导致样式解析失败。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Bing Maps Geocode Example</title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, searchManager;

    // 初始化地图，仅在页面加载时执行一次
    function initMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: '你的Bing Maps密钥'
        });
    }

    // 处理地理编码请求
    function geocodeLocation() {
        var query = document.getElementById('a').value;
        if (!query) {
            alert('请输入位置信息');
            return;
        }
        
        geocodeQuery(query);
    }

    function geocodeQuery(query) {
        console.log(query);
        // 加载搜索模块（如果未加载）
        if (!searchManager) {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                geocodeQuery(query);
            });
        } else {
            var searchRequest = {
                where: query,
                callback: function (r) {
                    // 清空之前的标记
                    map.entities.clear();
                    
                    if (r && r.results && r.results.length > 0) {
                        var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                        map.entities.push(pin);
                        map.setView({ bounds: r.results[0].bestView });
                    }
                },
                errorCallback: function (e) {
                    alert("未找到匹配结果。");
                }
            };

            searchManager.geocode(searchRequest);
        }
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=initMap' async defer></script>
</head>
<body>
    Location: <input type="text" name="a" id="a"><br>
    <button onclick="geocodeLocation()">Submit</button>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

修复说明 #

1. 修正HTML结构：将输入控件和按钮移到<body>标签内，确保DOM结构符合规范。
2. 分离初始化与业务逻辑：initMap仅在页面加载时初始化一次地图，点击按钮时调用geocodeLocation处理用户输入，避免重复创建地图实例。
3. 调整脚本回调：将Bing Maps脚本的callback改为initMap，避免无参数调用地理编码。
4. 优化用户体验：添加输入为空的判断，每次地理编码前清空旧标记，避免标记堆积。
5. 修复样式错误：移除地图容器style中的多余转义引号。

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