时间戳

首页 > 解决方案 > Azure Maps addIcon

azure-maps - Azure Maps addIcon

问题描述

在尝试向 Azure Maps 添加自定义图标时，这似乎不起作用。给定具有经度和纬度的场地列表。

for (var i = venues.length - 1; i > 0; i--) {
    if (i === 0) {
        map.setCamera({
            center: [
                venues[i].Longitude,
                venues[i].Latitude
            ]
        });
    }

    var img = new Image();
    img.id = "id_gmap_icon";
    img.src = "images/marker1.png";
    img.setAttribute("width", "100px");
    img.setAttribute("height", "100px");
    img.setAttribute('crossOrigin', null);

    map.addIcon("gmap-icon", img);

    var currPt = new atlas.data.Point([venues[i].Longitude, venues[i].Latitude]);
    var currPin = new atlas.data.Feature(currPt, {
        title: String(i + 1),
        fieldId: venues[i].FieldID,
        icon: 'gmap-icon'
    });

    map.addPins([currPin], {
        fontColor: "#000",
        fontSize: 14,
        iconSize: 1,
        cluster: false,
        name: searchLayerName + (i + 1),
        textFont: "SegoeUi-Bold",
        textOffset: [0, 0]
    });
}

该图像似乎作为正确的 HTMLImageElement 加载，但未加载到地图中。如果我将图标更改为“pin-red”，它将使用 Azure 的红色 pin 加载。

我错过了什么？

标签： azure-maps

解决方案

当您想将图标添加到地图以用作图钉时，必须先完全加载地图和图像，然后才能添加图标。请使用事件类型为“加载”的 addEventListener 方法。可以参考 Darrin 的代码。

推荐阅读