Azure Maps Show的白色屏幕

vql8enpb 于 2023-03-19 发布在其他

关注(0)|答案(2)|浏览(139)

一直在与此斗争2天了，现在我不知道该做什么....和它非常简单的我试图添加到我的网站Map只是基本的一个没有什么花哨和唯一的东西显示的是什么LOL一个空白屏幕。有人能给予我一些提示什么要找？
下面是我的简单但令人沮丧的代码---

<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" type="text/javascript"></script>
        <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js" type="text/javascript"></script>

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

});

function InitMap() {

    //Initialize a map instance.
    var map = new atlas.Map('field', {
        
        style: 'satellite',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Primary KEY>'
        }
    });
}

任何帮助都将不胜感激。谢谢你们：）
我已经尝试了以下方法
检查了兼容性，确保我使用层G2.im使用我正确的关键数字，div容器是正确的代码时，我右键单击并通过代码查看Map的所有数据都在那里，当我悬停在该代码上时，它在页面上亮起，好像它在那里（它只是白色）。

Azure

来源：https://stackoverflow.com/questions/75710507/azure-maps-shows-white-screen

2条答案

按热度按时间

rsaldnfx1#

使用AzureMapWeb SDK将Map添加到你的网站。
为了帮助你解决此问题，我建议你遵循AzureMapWeb SDK最佳做法。
感谢steve munk提供的文档。

HTML代码

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <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>

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   

   authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

   map.events.add('ready', function () {
                //Add zoom controls to bottom right of map.
                map.controls.add(new atlas.control.ZoomControl(), {
                    position: 'bottom-right'
                });

                //Add map style control in top left corner of map.
                map.controls.add(new atlas.control.StyleControl(), {
                    position: 'top-left'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

示例Map

检查了兼容性，确保我使用层G2.im使用我正确的关键数字，div容器是正确的代码时，我右键单击并通过代码查看Map的所有数据都在那里，当我悬停在该代码上时，它在页面上亮起，好像它在那里（它只是白色）。
如果代码中有Map数据，并且div容器是正确的，那么下一步就是检查浏览器开发工具中的控制台是否有错误。
检查浏览器开发者工具的步骤。
1.右键单击空白Map并选择“Inspect”或“Inspect Element”。
1.浏览器的开发者工具将打开。
1.转到“控制台”选项卡。
1.检查可能导致贴图不渲染的任何错误。
有关详细信息，请参阅MSDoc1和MSDoc2。

赞(0）回复(0）举报 2023-03-19

nuypyhwy2#

Map显示白色的主要原因有三：
1.提供了正确的身份验证详细信息。
1.使用“卫星”时，请确保你的AzureMap帐户定价层未设置为“Gen1（S0）"。S0是不提供对卫星图像的访问的低价层。建议切换到Gen2定价，该定价提供对所有AzureMap服务的访问，并且比“Gen1（S1）”层便宜。
1.Map没有尺寸，也不占用屏幕上的任何空间（CSS问题）。在这种情况下，您不会看到任何徽标或版权。要更正，请确保Mapdiv在屏幕上有一个大小。
要进一步调试这些问题，请执行以下操作：
1.在浏览器中打开开发者工具（F12）。检查控制台是否有错误。检查网络日志以查看是否有任何磁贴请求失败，如果有，请查看错误。
1.检查贴图div，看看它是否占用了屏幕空间。如果没有，修改分配给它的CSS，给予它一些尺寸。如果你动态修改div，贴图可能不会静止显示，因为它还没有触发重新呈现。你可以调用map.resize()来触发贴图的重新呈现。

赞(0）回复(0）举报 2023-03-19

我来回答

Azure Maps Show的白色屏幕

2条答案

相关问题

热门标签

最新问答