JavaScript 运行时错误：“Microsoft”未定义 - Bing 地图版本 7答案

【问题标题】：JavaScript runtime error: 'Microsoft' is undefined - Bing Maps version 7JavaScript 运行时错误：“Microsoft”未定义 - Bing 地图版本 7
【发布时间】：2018-10-04 08:52:05
【问题描述】：

我创建 Microsoft bing 地图。加载时出现 JavaScript 运行时错误（“Microsoft”未定义）。

    function GetMap() {

            var vcredentials = "<%=this.credentialKey%>" //credential Key
            var vlatitude = Number("<%=this.latitude%>") //Latitude
            var vlongitiude = Number("<%=this.longitiude%>") //Longitude
            var vzoomLevel = Number("<%=this.zoom%>");    //Zoom Level  
            var isDataAvailable = "<%=this.isFound%>";  //Is data available 

            // Create the Map instance
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), //div map load
            {
                credentials: vcredentials, //credential
                center: new Microsoft.Maps.Location(vlatitude, vlongitiude),// Latitude and Longitude
                mapTypeId: Microsoft.Maps.MapTypeId.road, //bing map type
                zoom: vzoomLevel, //zoom level
                showBreadcrumb: true, // show Bread crumb
                enableSearchLogo: false,//enable Search Logo
                enableClickableLogo: false,//enable Clickable Logo
                customizeOverlays: true //customize Overlays
            });

            if(isDataAvailable == "True" || isDataAvailable == "true")
                AddPushPin();

            Microsoft.Maps.Events.addHandler(map, 'viewchange', OnViewChanged);
            Microsoft.Maps.Events.addHandler(map, 'click', OnMouseClicked);
        }

【问题讨论】：

“微软未定义”。那一定是个梦……
您是否缺少任何导入语句？
我真的不知道 Bing 有地图...
@Frost 没有。包括所有声明..
我们能看更多你的代码吗？包含或定义 Microsoft 类的东西

标签： javascript asp.net ajax bing-maps

【解决方案1】：

我不认为你做错了什么。我创建了一个Bing Maps Key 并关注了these instructions。这就是它告诉您创建的内容：

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=YOURMAPKEY' async defer></script>

<div id="myMap"></div>

<style>
    #myMap {
        position: relative;
        width: 600px;
        height: 400px;
    }
</style>

<script type='text/javascript'>
    function GetMap() {
        var map = new Microsoft.Maps.Map('#myMap');
    }
</script>

但是这会引发错误

跨域请求被阻止：同源策略不允许读取远程资源https://www.bing.com/fd/ls/lsp.aspx

Map API 似乎有问题。用 Firefox、Chrome 和 Edge 对此进行了测试。在 Web 表单和简单的 html 页面上。

【讨论】：

【解决方案2】：

我发现了问题所在。它已加载主网页，但仍在加载地图。所以这是错误的。我修复它。这是我的解决方法。

 var retryCount = 0;
        function GetMap() {
            try {
                retryCount++;
                var vcredentials = "<%=this.credentialKey%>"
                var vlatitude = Number("<%=this.latitude%>")
                var vlongitiude = Number("<%=this.longitiude%>")
                var vzoomLevel = Number("<%=this.zoom%>");
                var isDataAvailable = "<%=this.isFound%>";
                
                
                // Create the Map instance
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                    {
                        credentials: vcredentials,
                        center: new Microsoft.Maps.Location(vlatitude, vlongitiude),
                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                        zoom: vzoomLevel,
                        showBreadcrumb: true,
                        enableSearchLogo: false,
                        enableClickableLogo: false,
                        customizeOverlays: true
                    });

                if(isDataAvailable == "True" || isDataAvailable == "true")
                    AddPushPin();

                Microsoft.Maps.Events.addHandler(map, 'viewchange', OnViewChanged);
                Microsoft.Maps.Events.addHandler(map, 'click', OnMouseClicked);
                }
             catch (Ex) {
                 if (typeof (Microsoft) == 'undefined' || Ex.message == 'Microsoft is not defined')
                       if (retryCount < 5) setTimeout('GetMap()', 5000);
                       else
                          alert('Fail to load Map. Error: ' + Ex.Message);
               
             }
        }
        
        $(document).ready(function () {
            retryCount = 0;

            if (document.readyState === "complete") {
                this.ready = true;

                GetMap();
            }
        });

【讨论】：