无法读取空 Bing 地图的属性 'prototype'

Question

我在我的代码中使用 'Bing Maps V8 interactive SDK.' 输入了 Bing 地图我的问题是，当我加载时代的 Microsoft 地图时，并不总是这样，我收到如下错误：

"Uncaught TypeError: Can not read property 'prototype' of null"

我不明白这是什么，因为我遵循了 Bing 地图开发中心网站上 "interactive SDK" 的建议。

错误

Uncaught TypeError: Cannot read property 'prototype' of null
at k (mapcontrol?key=key:14)
at n.h [as create] (mapcontrol?key=key:14)
at e (mapcontrol?key=key:14)
at t.l [as instance] (mapcontrol?key=key:14)
at n.h [as create] (mapcontrol?key=key:14)
at e (mapcontrol?key=key:14)
at t.l [as instance] (mapcontrol?key=key:14)
at new Microsoft.Maps.Map (mapcontrol?key=key:16)
at createBingMap (tracking.js:19)
at tracking.js:118

HTML

<script src="https://www.bing.com/api/maps/mapcontrol?key=YOURKEY"></script>

JAVASCRIPT

    (function()
    {
        if(Modernizr.geolocation)
        {           
            navigator.geolocation.getCurrentPosition(function(position)
            {
                  var latitude = position.coords.latitude;
                  var longitude = position.coords.longitude;
                  var bingResource = ajaxGeoReverse(latitude, longitude);
                  var comune = bingResource[0].toString();
                  var provincia = bingResource[1].toString();

                  createBingMap(latitude, longitude);

                  var positionLocality = {
                    "comune": comune, "provincia": provincia
                  };

                  $.ajax(
                    {
                      type: 'POST',
                      url: 'https://civicsensethecitizen.altervista.org/php/formTrackingTable.php',
                      data: {'items': JSON.stringify(positionLocality)},
                      dataType: 'json',
                      success: function(data) 
                      {
                          $.each(data, function(index, item)
                          {
                              var pushping = createPushpin(map.getCenter(), item.ID, item.Categoria, item.Gravita);
                              map.entities.push(pushping);

                              $('#tracking tbody').append(
                                    '<tr>' + 
                                    '<td id = "segnalazioneID">' + item.ID +
                                    '<td>' + item.Data +
                                    '<td>' + item.Posizione +
                                    '<td>' + item.Categoria +
                                    '<td>' + item.Stato +
                                    '</tr>');
                          });
                      },
                      error: function()
                      {
                        alert('Connsessione non riuscita');
                      }
                    });

            }, failGeo);
        }
    });

    function ajaxGeoReverse(latitude, longitude)
    {
        var bingResource = [];

        $.ajax( 
        {
            url: 'https://dev.virtualearth.net/REST/v1/Locations/' + latitude + ',' + longitude,
            async: false,
            data: {
              key: 'YOURKEY',
              o: 'json'
            },
            success: function(data)
            {
                var result = data.resourceSets[0];

                if (result) 
                {
                    if (result.estimatedTotal > 0) 
                    {
                        var comune = JSON.stringify(result.resources[0].address.locality);
                        var provincia = JSON.stringify(result.resources[0].address.adminDistrict2);

                        bingResource = [comune, provincia];
                    }
                } 
            },
            error: function()
            {
                failGeo();
            }
        });
        return bingResource;
    };

    function createBingMap(latitude, longitude)
    {
        if(typeof Microsoft !== undefined && typeof Microsoft.Maps !== undefined && Microsoft.Maps.Map !== null)
        {
            var navigationBarMode = Microsoft.Maps.NavigationBarMode;

            map = new Microsoft.Maps.Map(document.getElementById('container-gmap'), 
            {});

            map.setView(
            {
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                center: new Microsoft.Maps.Location(latitude, longitude)
            });

            map.setOptions(
            {
                maxZoom: 15,
                minZoom: 12
            });
        }
        else
        {   
            setTimeout(createBingMap, 500);
        }
    };

Answer 1

导航器代码似乎有可能在地图完全加载之前尝试向地图添加内容。这是一个时间问题。加载地图后考虑运行您的地理位置代码。

Answer 2

这是一个已知问题（参考，例如 this thread），它在地图初始化但尚未加载 Bing 地图控件时发生。

此处至少有两种解决方案：

1) 使用load事件确保Bing地图控件已经加载，例如：

window.addEventListener("load", function(){
    navigator.geolocation.getCurrentPosition(function(position) {
        initMap(position.coords);
    });
});

Demo

2) 在地图脚本中指定一个回调函数名称url:

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

initMap 函数将在 Bing 地图控件加载后触发

无法读取空 Bing 地图的属性 'prototype'

Cannot read property 'prototype' of null Bing Map

html

javascript

ajax

bing-maps

无法读取空 Bing 地图的 属性 'prototype'

Cannot read property 'prototype' of null Bing Map

html

javascript

ajax

bing-maps

无法读取空 Bing 地图的属性 'prototype'