必应地图地形叠加层无法读取未定义的属性“ set_style”

编程问答 2022-06-12

问题描述

我正在尝试根据Bing地图上的 Topography Overlay 进行缩放，我想为每个缩放级别加载不同的图像，并在缩放更改时将其删除。

我将每个缩放级别的每个TopographicOverlay存储在一个称为UO的数组中。默认级别为UO [0]，一切都按预期进行，直到我移动函数以将对象插入到主函数（称为startm）之外的层（称为insertOverlay）中。

换句话说，我的地图不是静态的。它是动态变化的，我需要能够从startm（）之外的函数中调用其方法。

错误消息如下：

未捕获的TypeError：无法读取未定义的属性'set_style'

var img;
var overlays = [];
var LastOverlayZoom = -1;

function startm(){
    var mapOptions = {
        credentials: "FAKECREDENTIAL",customizeOverlays: true,mapTypeId: Microsoft.Maps.MapTypeId.aerial
    };
    radar = new Microsoft.Maps.Map(document.getElementById("map_canvas"),mapOptions);

    var viewRect = Microsoft.Maps.LocationRect.fromCorners(
                      new Microsoft.Maps.Location(-23.40367,-68.82516),new Microsoft.Maps.Location(-23.41825,-68.80178));

    radar.setView({bounds: viewRect});

    //
    TopographicOverlay.prototype = new Microsoft.Maps.CustomOverlay();

    showOverlay(0);
}

var UO = [];
function showOverlay(zoom){
    if(zoom >= 0){
        if(LastOverlayZoom!=0){
            if(LastOverlayZoom>0){
                hideOverlay(UO[LastOverlayZoom]);
                UO[LastOverlayZoom]=[];
            }
            if(LastOverlayZoom !=- 1 && 0 == 0){
                LastOverlayZoom = 0;
                return false;
            }
            console.log('Showing zoom 0');
            LastOverlayZoom = 0;
            UO[0] = [];
            UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.4,-68.84),new Microsoft.Maps.Location(-23.39,-68.83)),'https://bingmapsisdk.blob.core.windows.net/isdksamples/topographicMap.gif',radar));
            UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.4,-68.83),-68.82)),-68.82),-68.81)),-68.81),-68.8)),radar));
            UO[0].push(new TopographicOverlay(Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-23.41,new Microsoft.Maps.Location(-23.4,radar));
            insertOverlay(UO[0]);
        }
    }
}

// Define custom constructor for the overlay
function TopographicOverlay(bounds,image,map) {
    this.bounds = bounds;
    this.image = image;
    this.map = map;
    this.img = document.createElement('img');
}

// Implement the onAdd method to set up DOM element,and use setHtmlElement bind it with the overlay
TopographicOverlay.prototype.onAdd = function () {
    this.img = document.createElement('img');
    this.img.src = this.image;
    this.img.className = 'topographicOverlay';
    this.img.style.width = '100%';
    this.img.style.height = '100%';
    this.img.style.zIndex = '0';
    this.img.style.position = 'absolute';
    this.img.style.pointerEvents = 'none';
    this.setHtmlElement(this.img);
};

// Implement the onLoad method to perform custom operations of rendering the DOM element
TopographicOverlay.prototype.onLoad = function () {
    this.repositionOverlay();
    //repositionOverlay(this);
    //Microsoft.Maps.Events.addHandler(this.map,'viewchange',repositionOverlay(this));
};

TopographicOverlay.prototype.repositionOverlay = function () {
    var topLeft = this.map.tryLocationToPixel(this.bounds.getnorthwest(),Microsoft.Maps.PixelReference.control);
    var bottomright = this.map.tryLocationToPixel(this.bounds.getSoutheast(),Microsoft.Maps.PixelReference.control);
    if (topLeft && bottomright) {
        this.img.style.left = topLeft.x + 'px';
        this.img.style.top = topLeft.y + 'px';
        this.img.style.width = (bottomright.x - topLeft.x) + 'px';
        this.img.style.height = (bottomright.y - topLeft.y) + 'px';
        this.img.style.zIndex = 0;
    }
};

function insertOverlay(UOl){ // muestra mapa sobrepuesto,UO es la lista de imagenes de un zoom específico
    UOl.forEach(function(UOimagery){
        console.log(UOimagery.image);
        radar.layers.insert(UOimagery);
    });
}
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=startm" async defer></script>
<div id="map_canvas" style="width:100%; height:100%; min-height:500px;"></div>

如何解决此错误？

我在做什么错了？

解决方法

我首先想到的是，在完全加载下面的所有代码之前，将调用startm函数。如果Bing Maps SDK的脚本标签在包含代码的脚本之前，则会发生这种情况。脚本标签的“异步”部分也可能是此处问题的一部分。尝试在此函数失败的地方添加断点，并检查其是否未定义。由于它似乎是全局函数，因此如果未定义，则尚未将其加载到页面中。

另一种尝试是将insertOverlay函数在代码中向上移动，以便在startm函数之前加载。

好像您正在尝试在地图上创建动画的天气叠加图。如果您不打算使用Bing Maps，则可能需要看一下Azure Maps。 Azure Maps将天气数据作为其平台的一部分，可以作为图块层使用。以下是一个示例，可用于为这些数据设置动画：https://azuremapscodesamples.azurewebsites.net/?sample=Animated%20tile%20layer

bing-mapsjavascriptprototype