Azure Maps 附加图标

Question

在尝试向 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 的红色图钉。

我错过了什么？

Answer 1

//Pre-load the custom pin image.
        var pinImg = new Image();
        pinImg.onload = function () {
            //Add the pin image to the map resources. Give it a unique id.
            map.addIcon('my-custom-icon', pinImg);
            //Add a pin to the map and use the custom pin image.
            var pin = new atlas.data.Feature(new atlas.data.Point(mapCenterPosition));
            //Add the pin to the map.
            map.addPins([pin], {
                name: 'default-pin-layer',
                icon: 'my-custom-icon',
                iconSize: 0.5
            });
        };
        pinImg.src = './Common/images/pins/showers.png';

Answer 2

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

Azure Maps 附加图标

Azure Maps addIcon

azure-maps