javascript - 在 OpenLayers 中设置自定义标记文件

Question

我的 GitHub Pages 帐户上托管了一个 OpenLayers 地图。我的目标是在地图上显示标记。当前图像无法加载，因为 marker.png 文件未正确托管。如果你想看，这是我的地图：https ://plutownium.github.io/Breweries-Map/

我已经遵循了一些关于如何上传自定义标记文件的示例。这里和这里。没用。我真的不知道如何使用 OpenLayers——我只是复制了代码并尽可能地对其进行了修改。我在代码中添加var size, offset && icon了这些icon.clone()行，以尝试呈现自定义标记。但它不起作用，甚至在我的本地主机上也不起作用。我只是得到了我的每个标记应该在的“图像未加载”图标。

这是我的代码：

// breweries is a batch of API requests waiting to resolve
Promise.all(breweries)
                .then(r => {
                    // console.log("R:", r); // an array of arrays
                    breweries = r;
                })
                .then(() => {
                    map = new OpenLayers.Map("mapdiv");
                    map.addLayer(new OpenLayers.Layer.OSM());

                    markersList = [];

                    for (let i = 0; i < breweries.length; i++) {
                        const listOfFifty = breweries[i];
                        for (let j = 0; j < listOfFifty.length; j++) {
                            if (
                                listOfFifty[j].longitude !== null &&
                                listOfFifty[j].latitude !== null
                            ) {
                                let point = new OpenLayers.LonLat(
                                    listOfFifty[j].longitude,
                                    listOfFifty[j].latitude
                                ).transform(
                                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                                    map.getProjectionObject() // to Spherical Mercator Projection
                                );
                                markersList.push(point);
                            }
                        }
                    }

                    // upload a new marker image...
                    var size = new OpenLayers.Size(21, 25);
                    var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
                    var icon = new OpenLayers.Icon("/marker.png", size, offset);

                    var zoom = 6;

                    var markers = new OpenLayers.Layer.Markers("Markers");
                    map.addLayer(markers);

                    for (let i = 0; i < markersList.length; i++) {
                        markers.addMarker(
                            // set the new marker...
                            new OpenLayers.Marker(markersList[i], icon.clone())
                        );
                    }

                    var testMarker = new OpenLayers.LonLat(
                        -120.2146488,
                        35.905002
                    ).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        map.getProjectionObject() // to Spherical Mercator Projection
                    );

                    markers.addMarker(
                        new OpenLayers.Marker(testMarker, icon.clone())
                    );

                    map.setCenter(testMarker, zoom);
                });

标签： javascriptopenlayers