Azure Maps - 看不到地图

Question

我正在学习本教程 (https://docs.microsoft.com/en-us/learn/modules/create-your-first-iot-central-app/) 在第 4 单元中，我按照所有步骤操作，但我看到的只是这样的空白页

Unit 4 exercise result

<!DOCTYPE html>
<html>

<head>
    <title>Map</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>

    <script>
        function GetMap() {
            //Instantiate a map object
            var map = new atlas.Map("myMap", {
                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: 'mB~~~~~~(I wrote my maps primary key here)'
                }
            });
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body onload="GetMap()">
    <div id="myMap"></div>
</body>

</html>

Azure Maps Resource

这个反馈页面也不起作用... (https://feedback.azuremaps.com/)

Feedback Maps

此外，在这个网站上，当我按“在新标签页中打开”时，我什么也看不到... (https://azuremapscodesamples.azurewebsites.net/)

Code samples Maps

我花了将近 4 个小时但找不到解决方案... 我需要做什么才能在这些页面上看到正确的地图？

Answer 1

如果使用 Azure Maps 的所有不同站点都不适合您，可能是以下原因之一：

确保您位于受支持的地区。位于中国或韩国的用户无法使用 Azure Maps，主动阻止对平台的请求。
您使用的浏览器不受支持：https://docs.microsoft.com/en-us/azure/azure-maps/supported-browsers
WebGL 在您的浏览器中被禁用，或者不工作。试试这个示例：https://azuremapscodesamples.azurewebsites.net/Map/Detect%20if%20browser%20is%20supported.html
您的显卡有问题，请尝试更新驱动程序。

Answer 2

检查地图是如何开始的

 $(document).ready(function () {
    InitMap();
});

function InitMap() {

    var map = new atlas.Map('myMap', {
        center: [-73.98235, 40.76799],
        zoom: 10,
        language: 'en-US',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: 'key1*****'
        }
    });

}

$(document).ready(function () {
    InitMap();
});

Azure Maps - 看不到地图

Azure Maps - Cannot see the map

azure

azure-maps