javascript - 无法读取空 Bing map 的属性 'prototype'

Question

我使用“Bing Maps V8 交互式 SDK”在我的代码中输入了 Bing map 。我的问题是，当我加载 Microsoft 时代 map 时，并非总是如此，我收到如下错误:

“未捕获的类型错误:无法读取 null 的属性‘原型(prototype)’”

我不明白这是什么，因为我遵循了 Bing Map Dev Center 网站上“交互式 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

这是一个已知问题(参见，例如 this thread)，它在 map 初始化但 Bing map 控件尚未加载时发生。

这里至少有两种解决方案:

1) 使用load事件确保Bing Maps Control已经加载，例如:

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

Demo

2) 在 map 脚本 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 map 控件后触发