Question

我使用“ Bing Maps V8交互式SDK”在代码中输入了Bing地图。我的问题是，当我并非总是加载时间的Microsoft地图时，会出现类似以下错误：

“未捕获的TypeError：无法读取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），该问题发生在地图被初始化但尚未加载Bing Maps控件时。

此处至少提供两种解决方案：

1）使用load事件来确保已加载Bing Maps Control，例如：

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

Demo

2）在地图脚本网址中指定回调函数名称：

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

initMap函数将在Bing Maps Control加载后触发

Answer 2

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

无法读取空Bing Map的属性“原型”

2 个答案: